Skip to main content

CSS 3D Transform — exercises and bug fixes

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

    Add perspective

    easy10 min

    Give #wrap an 800px perspective.

  2. 2

    Preserve 3D space

    easy10 min

    Let the children of #wrap live in 3D space.

  3. 3

    Hide the back face

    easy10 min

    Hide the reverse side of #box when it rotates.

  4. 4

    Translate in 3D

    easy10 min

    Move #box 1px right, 2px down and 3px towards the viewer.

  5. 5

    Build a 3D stage

    medium10 min

    Perspective on the wrapper, preserve-3d, and a hidden back face.

Find the bug(5)

  1. 1

    Fix the perspective with no unit

    easy8 min

    perspective needs a length.

  2. 2

    Fix the missing hyphen

    easy8 min

    The value is preserve-3d.

  3. 3

    Fix the invalid visibility value

    easy8 min

    backface-visibility takes visible or hidden.

  4. 4

    Fix translate3d with two arguments

    easy8 min

    translate3d() needs all three axes.

  5. 5

    Fix the perspective on the wrong element

    easy8 min

    Perspective belongs on the parent, not the transformed child.

Ready to write the code?

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

Open the workspace