O'Reilly logo

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

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required