Lesson 5 of 8
Transforms
- 12 min
- 4 checks
- 3 hints
- Go to task
Goal
Motion that's light on the browser
01
Explanation
The transform property moves, scales and rotates an element without touching the page layout, so the elements around it stay put, and the browser runs it on the GPU.
That's where the well-known performance rule comes from: animate only transform and opacity. Animating width or top forces the browser to recalculate the positions of elements on every frame, and the motion stutters.
You can combine several transforms on one line, and their order matters: translate, then rotate, then scale.
02
Your task
When the mouse pointer moves over .tile, lift it and scale it up slightly in a single transform, and make the motion smooth with a transition.
Checks
4 checks- The tile has a transition with a duration above zero
- The transition includes transform
- A :hover rule sets transform
- The transform combines a translate and a scale