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.
Give #wrap an 800px perspective.
Let the children of #wrap live in 3D space.
Hide the reverse side of #box when it rotates.
Move #box 1px right, 2px down and 3px towards the viewer.
Perspective on the wrapper, preserve-3d, and a hidden back face.
perspective needs a length.
The value is preserve-3d.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspacebackface-visibility takes visible or hidden.
translate3d() needs all three axes.
Perspective belongs on the parent, not the transformed child.