Give #wrap an 800px perspective.
Acceptance criteria
- 1.Give #wrap an 800px perspective.
CSS Tutorial · CSS Animations & Transitions
These 10 tasks go with the CSS 3D Transform chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “CSS 3D Transform allows you to transform elements in a three-dimensional space using the X, Y, and Z axes.” Read the chapter.
1.Add perspectiveexercise · easy · 10 min
Give #wrap an 800px perspective.
Passes when: Give #wrap an 800px perspective.
2.Preserve 3D spaceexercise · easy · 10 min · practice plan
Let the children of #wrap live in 3D space.
Passes when: Let the children of #wrap live in 3D space.
3.Hide the back faceexercise · easy · 10 min · practice plan
Hide the reverse side of #box when it rotates.
Passes when: Hide the reverse side of #box when it rotates.
4.Translate in 3Dexercise · easy · 10 min · practice plan
Move #box 1px right, 2px down and 3px towards the viewer.
Passes when: Move #box 1px right, 2px down and 3px towards the viewer.
5.Build a 3D stageexercise · medium · 10 min · practice plan
Perspective on the wrapper, preserve-3d, and a hidden back face.
Passes when: Perspective on the wrapper, preserve-3d, and a hidden back face.
6.Fix the perspective with no unitbug fix · easy · 8 min
perspective needs a length.
Passes when: perspective needs a length.
7.Fix the missing hyphenbug fix · easy · 8 min · practice plan
The value is preserve-3d.
Passes when: The value is preserve-3d.
8.Fix the invalid visibility valuebug fix · easy · 8 min · practice plan
backface-visibility takes visible or hidden.
Passes when: backface-visibility takes visible or hidden.
9.Fix translate3d with two argumentsbug fix · easy · 8 min · practice plan
translate3d() needs all three axes.
Passes when: translate3d() needs all three axes.
10.Fix the perspective on the wrong elementbug fix · easy · 8 min · practice plan
Perspective belongs on the parent, not the transformed child.
Passes when: Perspective belongs on the parent, not the transformed child.
Between them these tasks cover perspective, transform-style and backface-visibility.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.