3-Dimensional Rotations with rotateZ() and rotate3d()

So you've seen how rotations on the X and Y axis behave in 3D space. 0:00 RotateY rotates elements left to right on the Y axis, and 0:05 rotateX tilts elements towards and away from us on the X axis. 0:10 Earlier you learned that 3D transforms use a third axis called the Z axis. 0:19 So that means we can also rotate on the Z axis. 0:25 In fact, we can rotate an element on the X, Y, and Z axis all at the same time. 0:28 It's one of the cooler parts of transforming in 3D space. 0:34 So if you only want a regular clockwise or counter clockwise rotation, 0:37 you can still use the rotate function you learned about in the previous section. 0:41 So if I change the rotate function in the photo hover rule to rotate and 0:46 set the value to 45 degrees, 0:51 this produces the same type of rotation, even when in 3D space. 0:56 The difference is that now the photos are actually rotating on their Z axis. 1:00 But you can also use the rotateZ 3D function to rotate around the Z axis. 1:06 As you can see, a rotateZ rotation looks and works the same way as rotate. 1:13 As I mentioned earlier, 1:19 in 3D space you are able to rotate elements in multiple directions at once. 1:20 So CSS has a rotate 3D function you can use to perform 1:26 a 3D rotation on the X, Y and Z access, all in one function. 1:31 The rotate3d functions accepts four comma separated values. 1:37 The first three values set the direction of the rotation on the x, 1:41 y and z axis, and the fourth value sets the rotation angle. 1:46 Now the values for x, y and 1:51 z are always the number of values zero or one, and you'll see why soon. 1:54 And the fourth value you can use any angle unit like degree or turn. 2:00 So, back on my style sheet, I'm going to change the rotate z function and 2:05 the photo hover rule to the rotate 3d function. 2:09 I'll set the first 3 values to 0 and the fourth value to 45 degrees. 2:14 So no rotation happens in the browser yet. 2:24 Why? 2:27 Well now we need to set the direction of the rotation by changing any of the x, 2:28 y, and z values from 0 to 1. 2:34 Changing a value from zero to one, let's the browser know that you want to 2:38 rotate the element on that particular axis. 2:43 So for instance, if I change the value of X from 0 to 1, 2:45 this sort of turns on the rotation for the X axis only. 2:50 So now it's going to rotate the photo div 45 degrees on the x axis. 2:56 Now I can turn off the rotation for x by setting the first value back to 0, 3:02 and then I can set it to rotate on the y axis only, 3:09 by changing the second value from 0 to 1. 3:13 Now the rotation only happens on the y axis. 3:21 Now, if I want a different rotation angle, I can simply change the fourth value. 3:24 So, for instance, I'll change it to a rotation of 65 degrees. 3:29 And we can even rotate two, or all three axes at the same time. 3:39 So, for example, I'll set the values for x and y to 1. 3:44 And now the photo sort of tilts up and 3:52 slides back 45 degrees all at the same time. 3:55 Now if we rotate all 3 axis by setting the first 3 values to 1. 3:58 You can see how this adds a subtle clockwise spin motion to the rotation. 4:07 Now, I'm going to set my rotation back to the 180 4:12 degree flip rotation on the x axis only. 4:16 So I'll leave the value for x as 1, and I'll set the value for y and z back to 0. 4:20 And I'll make the rotation value 180 degrees. 4:27 So the rotate 3D function makes working with 3D transforms more convenient 4:35 because we can efficiently set multiple rotations with one simple function. 4:40