Activate 3D Space with perspective6:47 with Guil Hernandez
Before you can transform an element in 3D, you need to establish a 3D perspective on the page, otherwise your transforms will still appear flat and two-dimensional. To define 3D space, you can use the 'perspective' property.
- Perspective is what separates 3D transforms from 2D transforms.
- You define 3D space with the 'perspective' property.
perspectiveproperty creates the illusion of depth; it sets how far away or how close objects appear to us.
- You can apply the
perspectiveproperty to the
<div>, or any block-level element.
- The value for
perspectivecan be set in pixels, em, or rem.
- When you enable 3D space with
perspective, the smaller the value, the deeper the perspective; the greater the value, the shallower the perspective.
- A value between
800pxusually renders a realistic perspective.
- If you delete the
perspectiveproperty at any time, you will lose the 3D effect on your page.
You need to sign up for Treehouse in order to download course files.Sign up