Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
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.
.photo
selector shown in the video, you will want to use the .photo-container
selector for the transform rotate rules..content {
perspective: 700px;
}
.photo-container {
transform: rotateY(55deg)
}
Resources
Video review
- Perspective is what separates 3D transforms from 2D transforms.
- You define 3D space with the 'perspective' property.
- The
perspective
property creates the illusion of depth; it sets how far away or how close objects appear to us. - You can apply the
perspective
property to the<body>
, a<div>
, or any block-level element. - The value for
perspective
can 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
500px
and800px
usually renders a realistic perspective. - If you delete the
perspective
property at any time, you will lose the 3D effect on your page.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up