// the take
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.
We read the README, the directory tree and a key source file in July 2026. Nobody pays to be listed. How we judge →