Learn how to enhance a webpage image slideshow using 3D transformations
- [Instructor] In the last video, I showed you how you can change your page objects using 3D transformations. In this video, we'll explore multiple transformation functions applied to 3D space. This demo page allows you to apply multiple 3D transformations in any order. So for example, I can translate this object horizontally along the x-axis, vertically along the y-axis, and then rotate the object around the x-axis.
Now as with 2D transformations, order is crucial. These transformation functions are applied in the order of which they're listed. So for example, if I now move the object along the x-axis, it moves relative to the x-axis of the 3D space. And if I move it along the y-axis, it moves relative to the y-axis of the 3D space. But lets say I rotate it first and then translated it.
Now when I move it, it's moving relative to the object's orientation in 3D space. Moving up and down means moving up and down in the direction in which the object has been rotated. Let's apply the idea of multiple 3D transformations to the slideshow we created in the first video chapter. I want to apply a new effect in which these figures which are stacked on top of each other are flipped off the stack and moved to the right.
Once again, I have two style rules. One is the initial state of the object and the other is the state of the object when the mouse is hovering over it. For the initial state, I'll create the following 3D transformation. I'll set the perspective value to 1000 pixels. I'll translate it along the z-axis zero pixels. I'll rotate it around the y-axis zero degrees.
And I'll rotate it around the x-axis zero degrees. And then finally, I'll scale it in 3D to the values one, one, and one. So essentially, this transformation has no effect on the appearance of the object. I also want to set the transform origin value to 140% and negative 5%. That places the origin to the right and above the page object.
I'll establish a transition of none, 'cause this is going to be an asymmetric transition. Now let's establish the transformations that will occur when I hover the mouse pointer over the object. Once again, I'll set the perspective value to 1000 pixels. But, I'll change the translation along the z-axis to about 50 pixels.
I'll rotate the object around the y-axis by 180 degrees and around the x-axis by 70 degrees. Finally, I'll resize the object, reducing the height and the width by 1/2 using the scale 3D function. Okay, there's my 3D transformation for both the initial state and the end state of the object.
Now save our changes and view the 3D slideshow in action. And there we have it, an interesting visual effect as the figures in the show are presented prominently on the page and then flipped backwards to the right side. In our next video, we'll take one last look at matrices by applying them to 3D space.
- Applying CSS transitions
- Managing transition timing
- Making 2D transformations
- Rotating and scaling in 3D
- Working in 3D space