To me 3D is one of the most interesting new features in CSS, adding depth and dynamism to web pages.
Of all the reading lists presented so far, I anticipate that this article will have the most changes in the future: there is much material to add. If you’re interested, I’d advise checking back regularly or following me on Twitter for updates.
Goals: Transform and animate web page elements in 3D space.
Prerequisite: Transforms and Animation
Total practice time: 2 hours
Core Material
When You’re Done
You might want to check out some 3D galleries to apply the techniques you’ve learned:
- Origami
- image flip gallery with dynamic shadows
- 3D carousel
- 3D card scatter gallery with video.
- 3D Venetian Blind Image Transition
You also might want to read up on a older technique of smoothing 2D CSS animations by pipelining them through the GPU
Photograph by Eric Balcon