Skip to main content

CSS 2D Transform — exercises and bug fixes

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.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Scale with a function

    easy10 min

    Use transform to scale #box to twice its size.

  2. 2

    Translate horizontally

    easy10 min

    Move #box 20px to the right with transform.

  3. 3

    Translate on both axes

    easy10 min

    Move #box 10px right and 20px down with transform.

  4. 4

    Scale each axis

    easy10 min

    Scale #box 2x horizontally and 3x vertically.

  5. 5

    Chain two functions

    medium10 min

    Move #box 10px right, then scale it to 2.

Find the bug(5)

  1. 1

    Fix scale given a length

    easy8 min

    scale() takes a unitless number.

  2. 2

    Fix the wrong axis

    easy8 min

    The box should move horizontally.

  3. 3

    Fix the missing units

    easy8 min

    translate() needs lengths, not bare numbers.

  4. 4

    Fix the swapped arguments

    easy8 min

    translate() takes x first, then y.

  5. 5

    Fix the comma between functions

    easy8 min

    Chained transform functions are separated by spaces.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace