5 hands-on exercises and 5 find-the-bug challenges for the CSS 2D Transform lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Use transform to scale #box to twice its size.
Move #box 20px to the right with transform.
Move #box 10px right and 20px down with transform.
Scale #box 2x horizontally and 3x vertically.
Move #box 10px right, then scale it to 2.
scale() takes a unitless number.
The box should move horizontally.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspacetranslate() needs lengths, not bare numbers.
translate() takes x first, then y.
Chained transform functions are separated by spaces.