Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • DigitalOcean
  • DO Community
Search

Articles Tagged
3d

17 Articles
{
,

}
Direct link to the article A CSS Slinky in 3D? Challenge Accepted!
3d animation animation-delay

A CSS Slinky in 3D? Challenge Accepted!

Braydon Coyer recently launched a monthly CSS art challenge. He actually had reached out to me about donating a copy of my book Move Things with CSS to use as a prize for the winner of the challenge — …

Avatar of Jhey Tompkins
Jhey Tompkins on May 12, 2022
Direct link to the article Creating the DigitalOcean Logo in 3D With CSS
3d digital ocean

Creating the DigitalOcean Logo in 3D With CSS

Howdy y’all! Unless you’ve been living under a rock (and maybe even then), you’ve undoubtedly heard the news that CSS-Tricks, was acquired by DigitalOcean. Congratulations to everyone! 🥳

As a little hurrah to commemorate the occasion, I wanted to …

Avatar of Jhey Tompkins
Jhey Tompkins on Apr 29, 2022
Direct link to the article How to Make a Pure CSS 3D Package Toggle
3d css animation custom properties

How to Make a Pure CSS 3D Package Toggle

You know how you can get cardboard boxes that come totally flat? You fold ‘em up and tape ‘em to make them into a useful box. Then when it’s time to recycle them, you cut them back apart to flatten …

Avatar of Jhey Tompkins
Jhey Tompkins on Jan 12, 2022 (Updated on Jan 13, 2022)
Direct link to the article CSS in 3D: Learning to Think in Cubes Instead of Boxes
3d animation css shapes perspective

CSS in 3D: Learning to Think in Cubes Instead of Boxes

My path to learning CSS was a little unorthodox. I didn’t start as a front-end developer. I was a Java developer. In fact, my earliest recollections of CSS were picking colors for things in Visual Studio.

It wasn’t until later …

Avatar of Jhey Tompkins
Jhey Tompkins on Oct 23, 2020
Direct link to the article ztext.js
3d SVG typography

ztext.js

Direct Link

Super cool project from Bennett Feely! It makes any web type into 3D lettering with a mouseover effect that moves the 3D objects in space. It’s reminiscent of Zdog, but for type. It works its magic by stacking a …

Avatar of Chris Coyier
Shared by Chris Coyier on Sep 22, 2020
Direct link to the article The Mad Magazine Fold-In Effect in CSS
3d animation transform

The Mad Magazine Fold-In Effect in CSS

Direct Link

This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page in thirds, covering up the middle-third of that image, and a …

Avatar of Chris Coyier
Shared by Chris Coyier on Jun 25, 2020 (Updated on Jun 29, 2020)
Direct link to the article Zdog
3d canvas SVG

Zdog

David DeSandro has loads of super cool JavaScript libraries he’s created over the years. His latest is Zdog, a “round, flat, designer-friendly pseudo-3D engine for canvas & SVG.” It’s only been about a month since he dropped it (although, …

Avatar of Chris Coyier
Chris Coyier on Jul 24, 2019
Direct link to the article Creating Photorealistic 3D Graphics on the Web
3d three.js webgl

Creating Photorealistic 3D Graphics on the Web

Before becoming a web developer, I worked in the visual effects industry, creating award-winning, high-end 3D effects for movies and TV Shows such as Tron, The Thing, Resident Evil, and Vikings. To be able to create these effects, we …

Avatar of Engin Arslan
Engin Arslan on Aug 4, 2017
Direct link to the article Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items
3d circle

Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items

Let’s say we wanted to have something like this:

Clockwise circular (cyclic) distribution with partially overlapping items.

At first, this doesn’t seem too complicated. We start with 12 numbered items:…

Avatar of Ana Tudor
Ana Tudor on May 22, 2017
Direct link to the article Simplifying CSS Cubes with Custom Properties
3d css variables custom properties JavaScript

Simplifying CSS Cubes with Custom Properties

I know there are a ton of pure CSS cube tutorials out there. I’ve done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel… outdated and very WET. …

Avatar of Ana Tudor
Ana Tudor on May 16, 2017 (Updated on May 17, 2017)
Direct link to the article Star Wars Crawl Text
3d animation star wars

Star Wars Crawl Text

The opening to Star Wars is iconic. The effect of text scrolling both up and away from the screen was both a crazy cool special effect for a movie back in 1977 and a cool typographical style that was brand …

Avatar of Geoff Graham
Geoff Graham on Jan 31, 2017
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • DigitalOcean
  • DigitalOcean Community
  • About DigitalOcean
  • Legal
  • Free Credit Offer
CSS-Tricks
  • Email
  • Guest Writing
  • Book
  • Advertising
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • iTunes
  • RSS
Back to Top