Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
3d

20 Articles
{
,

}
Direct link to the article CSS Infinite 3D Sliders
3d carousel slider transform

CSS Infinite 3D Sliders

In this series, we’ve been making image sliders with nothing but HTML and CSS. The idea is that we can use the same markup but different CSS to get wildly different results, no matter how many images we toss …

Avatar of Temani Afif
Temani Afif on Dec 16, 2022
Direct link to the article Single Element Loaders: Going 3D!
3d clip-path gradients loader mask

Single Element Loaders: Going 3D!

For this fourth and final article of our little series on single-element loaders, we are going to explore 3D patterns. When creating a 3D element, it’s hard to imagine that just one HTML element is enough to simulate something like all six faces of a cube. But  maybe we can get away …

Avatar of Temani Afif
Temani Afif on Jul 1, 2022 (Updated on Aug 27, 2023)
Direct link to the article Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D
3d background-clip hover mask-clip

Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D

We’ve walked through a series of posts now about interesting approaches to CSS hover effects. We started with a bunch of examples that use CSS background properties, then moved on to the text-shadow property where we technically didn’t use …

Avatar of Temani Afif
Temani Afif on May 26, 2022
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 digitalocean

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

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
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

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
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
  • 1
  • 2
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top