From the course: CSS: Transforms and Transitions
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Working with backfaces - CSS Tutorial
From the course: CSS: Transforms and Transitions
Working with backfaces
- [Instructor] In this video, I'm going to use CSS to construct a two-sided card using the 3D styles that we've explored in the previous videos. First I have to construct the 3D space that will contain the card object. I have a container here with a perspective value of 1,500 pixels. And within that container, I have a card object and notice I've used the transform style property with a value of preserved 3D so that the 3D space defined for the container is passed to the card. And I've set the transform value to rotate x and rotate y of zero degrees. Now let's nest within that card object an image for the front of the card. I position the object at the front of the card setting the absolute position to top and left. Next, I'll nest a second object within the card that will contain the back image of the card. But when I do that, I also have to rotate the card 180 degrees around the y-axis. So now both the front and the back face are within the card object. And because I've used the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.