Skip to main content

CSS Transform — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS 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

    Rotate an element

    easy10 min

    Rotate #box by 45 degrees using the rotate property.

  2. 2

    Scale an element

    easy10 min

    Scale #box to 1.5 times its size.

  3. 3

    Move an element

    easy10 min

    Translate #box 10px right and 20px down.

  4. 4

    Change the origin

    easy10 min

    Set the transform origin of #box to its top-left corner.

  5. 5

    Combine transforms

    medium10 min

    Rotate #box 30 degrees and scale it to 2.

Find the bug(5)

  1. 1

    Fix the angle with no unit

    easy8 min

    An angle needs a unit such as deg.

  2. 2

    Fix the scale given a length

    easy8 min

    scale takes a plain number, not a length.

  3. 3

    Fix the swapped translation

    easy8 min

    The horizontal value comes first.

  4. 4

    Fix the misspelled property

    easy8 min

    The property is transform-origin.

  5. 5

    Fix the transform on the wrong element

    easy8 min

    The inner box should rotate, not the wrapper.

Ready to write the code?

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

Open the workspace