CSS in Depth, Second Edition

16 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 and performance considerations
• 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, ...