Learning About CSS 3D Transforms and Perspective
3D transforms, despite being available in CSS for a while, are one area I’ve never understood well. I think if they were new to CSS now, I’d spend a lot more time playing around with them, like I have with Motion Path and some other new CSS features. As things stand, I’ve never had much cause to use them in production (with the odd exception), so I’ve concentrated my time and energy on other things.
But recent work by talented folks on Codepen had me wishing I had a better grasp of this powerful area of CSS. I fell in love this demo by Adam Kuhn, which combines 3D transforms with Motion Path – I can see lots more potential for using these together. Ana Tudor built an entire series of Johnson Solids, which get progressively more complex. She has an impressive body of work coding polyhedra, which can be found in this collection. Not to mention this quite simply mind-blowing demo my Amit Sheen, where pages of a book are actually animated with 3D transforms:
I figured it was time to learn! I came across this well-written article, also by Amit Sheen, explaining 3D transforms and perspective. The interactive examples, coupled with a step-by-step walk-through creating an animated cube, really helped things click. I’m looking forward to building a lot more with 3D transforms in the future, and feeling much more confident about it!
To try out my newfound knowledge, I made a little CSS animation inspired by a GIF I saw online. It uses a single <div>, with multiple repeating background gradients, 3D transforms and animated background-position. (You can’t animate gradients with CSS alone, but you can animate background-position).
I’ve also made a couple of demos showing how several elements’ transforms are altered by changing the transform-style and perspective-origin properties of the parent – something that took me a while to get my head around:
I still feel I have a lot to learn, but the only way is through practice!
Inspiration
Some more inspiring demos from talented folks:
- Climbing up the stairs – yet another incredible demo from Amit Sheen, where the text animates up a flight of stairs
- CSS 3D Transforms and animations – this collection by Pete Barr has just too many amazing examples to pick just one...but if I have to choose, I’m rather partial to this one, which responds to scroll
- CSS 3D Animated Toaster – this cute little toaster animation is, like everything Jhey does, an absolute delight!
- 3D CSS – some more spectacular 3D magic from Adam Kuhn, whose continuously high-quality creative output is unrivalled