Animating 3D doesn’t have to involve WebGL and a bunch of JavaScript libraries before getting down to the business of actually crafting an exciting animation. CSS, with a little bit of JavaScript, can do the job for simple, effective animation, with the added benefit that it’s DOM based – meaning HTML elements galore and established practices for managing interaction.
Though this tutorial chooses to implement coloured faces on the cube, it’s possible to put any content within those face elements. It could become the foundation for an unusual carousel, or even a full-page transition.
This tutorial introduces 3D transforms, perspective and preserve-3d, keyframe animation, managing animation states with JavaScript.
More importantly though, is the thought that goes into motion design. You’ll be designing animation which brings a realness to objects…
