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

Working with backfaces - CSS Tutorial

From the course: CSS: Transforms and Transitions

Start my 1-month free trial

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…

Contents