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, I’ll walk you through applying transforms to a static element. This will give you a grasp of how they work in isolation before you add them into some transitions. Then, you’ll build a small but complex menu with multiple transforms and transition effects. Finally, we’ll take a look at working in 3D and utilizing perspective. This will carry over into the next chapter, where you’ll use 3D transforms in conjunction with animation.
16.1 Rotate, translate, scale, and skew
transform: rotate(90deg);