Learning CSS3 Animations and Transitions: A Hands-on Guide to Animating in CSS3 with Transforms, Transitions, Keyframes, and JavaScript

7. Animating 2D and 3D Transforms

In this chapter, you will work through two examples that demonstrate how you can combine 2D and 3D transforms with CSS3 transitions and keyframe animations to create interesting effects. To begin animating 3D transforms, you’ll start in familiar territory, taking the 3D cube that you built in Chapter 6, “Adding Depth with 3D Transforms,” and applying transitions, a few HTML5 range input type elements, and a bit of JavaScript to rotate the cube about each of the three axes.

Basic 3D Transform Animations with Transitions

In Chapter 6, you built a 3D cube using CSS3 transforms. You can enrich that example to allow the user to change the rotation of the cube, animating any changes made.

In order to do this, you can ...