// the find
desandro/3dtransforms
:package: Introduction to CSS 3D transforms
A tutorial site from 2010 (updated through 2020) that walks through CSS 3D transforms with hands-on examples: card flips, cubes, carousels, perspective controls. It's for frontend developers who want to understand how `perspective`, `transform-style: preserve-3d`, and `rotateX/Y/Z` actually work, not just copy-paste animations.
The progression is logical — it starts with perspective, builds to compound 3D shapes, and each example is minimal enough to see exactly what's doing what. The carousel and cube examples are genuinely useful reference implementations, not toy demos. DeSandro writes clearly and explains the math behind perspective without over-explaining. The CodePen integration lets you tweak examples without cloning anything.
Last touched in 2020 and the original article is from 2010 — browser compatibility notes are stale and some caveats about Safari bugs or unprefixed properties no longer apply (or new ones have appeared). There's no coverage of CSS custom properties as transform variables, `@starting-style`, or animation timeline features that have landed since. It's a static Jekyll site with no active maintenance, so issues and PRs sit unmerged. If you're looking for animation performance guidance (compositing, will-change, GPU layers), look elsewhere — this doesn't go there.