CSS in Depth

Chapter 15. Transforms

This chapter covers

• Manipulating elements using transforms for performant transitions and animations
• Adding a “bounce” effect to a transition
• The browser’s rendering pipeline
• Looking at 3D transforms and perspective

In this chapter, we’ll explore the transform property, which you can use to change or distort the shape or position of an element on the page. This can involve rotating, scaling, or skewing the element in two or three dimensions. Transforms are most commonly used in conjunction with transitions or animations, which is why I’ve sandwiched this chapter between those two topics. In these last two chapters, you’ll build a page that makes heavy use of transitions, transforms, and animations.

First, I’ll walk you ...