1 00:00:00,250 --> 00:00:05,335 So you've seen how rotations on the X and Y axis behave in 3D space. 2 00:00:05,335 --> 00:00:10,855 RotateY rotates elements left to right on the Y axis, and 3 00:00:10,855 --> 00:00:16,847 rotateX tilts elements towards and away from us on the X axis. 4 00:00:19,524 --> 00:00:25,740 Earlier you learned that 3D transforms use a third axis called the Z axis. 5 00:00:25,740 --> 00:00:28,870 So that means we can also rotate on the Z axis. 6 00:00:28,870 --> 00:00:34,600 In fact, we can rotate an element on the X, Y, and Z axis all at the same time. 7 00:00:34,600 --> 00:00:37,490 It's one of the cooler parts of transforming in 3D space. 8 00:00:37,490 --> 00:00:41,830 So if you only want a regular clockwise or counter clockwise rotation, 9 00:00:41,830 --> 00:00:46,020 you can still use the rotate function you learned about in the previous section. 10 00:00:46,020 --> 00:00:51,120 So if I change the rotate function in the photo hover rule to rotate and 11 00:00:51,120 --> 00:00:56,720 set the value to 45 degrees, 12 00:00:56,720 --> 00:01:00,700 this produces the same type of rotation, even when in 3D space. 13 00:01:00,700 --> 00:01:06,140 The difference is that now the photos are actually rotating on their Z axis. 14 00:01:06,140 --> 00:01:13,190 But you can also use the rotateZ 3D function to rotate around the Z axis. 15 00:01:13,190 --> 00:01:19,590 As you can see, a rotateZ rotation looks and works the same way as rotate. 16 00:01:19,590 --> 00:01:20,980 As I mentioned earlier, 17 00:01:20,980 --> 00:01:26,150 in 3D space you are able to rotate elements in multiple directions at once. 18 00:01:26,150 --> 00:01:31,500 So CSS has a rotate 3D function you can use to perform 19 00:01:31,500 --> 00:01:37,050 a 3D rotation on the X, Y and Z access, all in one function. 20 00:01:37,050 --> 00:01:41,600 The rotate3d functions accepts four comma separated values. 21 00:01:41,600 --> 00:01:46,490 The first three values set the direction of the rotation on the x, 22 00:01:46,490 --> 00:01:51,690 y and z axis, and the fourth value sets the rotation angle. 23 00:01:51,690 --> 00:01:54,380 Now the values for x, y and 24 00:01:54,380 --> 00:02:00,410 z are always the number of values zero or one, and you'll see why soon. 25 00:02:00,410 --> 00:02:04,440 And the fourth value you can use any angle unit like degree or turn. 26 00:02:05,710 --> 00:02:09,820 So, back on my style sheet, I'm going to change the rotate z function and 27 00:02:09,820 --> 00:02:13,140 the photo hover rule to the rotate 3d function. 28 00:02:14,370 --> 00:02:21,148 I'll set the first 3 values to 0 and the fourth value to 45 degrees. 29 00:02:24,284 --> 00:02:27,840 So no rotation happens in the browser yet. 30 00:02:27,840 --> 00:02:28,810 Why? 31 00:02:28,810 --> 00:02:34,700 Well now we need to set the direction of the rotation by changing any of the x, 32 00:02:34,700 --> 00:02:38,830 y, and z values from 0 to 1. 33 00:02:38,830 --> 00:02:43,050 Changing a value from zero to one, let's the browser know that you want to 34 00:02:43,050 --> 00:02:45,654 rotate the element on that particular axis. 35 00:02:45,654 --> 00:02:50,987 So for instance, if I change the value of X from 0 to 1, 36 00:02:50,987 --> 00:02:56,106 this sort of turns on the rotation for the X axis only. 37 00:02:56,106 --> 00:03:02,439 So now it's going to rotate the photo div 45 degrees on the x axis. 38 00:03:02,439 --> 00:03:09,190 Now I can turn off the rotation for x by setting the first value back to 0, 39 00:03:09,190 --> 00:03:13,616 and then I can set it to rotate on the y axis only, 40 00:03:13,616 --> 00:03:17,625 by changing the second value from 0 to 1. 41 00:03:21,063 --> 00:03:24,870 Now the rotation only happens on the y axis. 42 00:03:24,870 --> 00:03:29,450 Now, if I want a different rotation angle, I can simply change the fourth value. 43 00:03:29,450 --> 00:03:33,605 So, for instance, I'll change it to a rotation of 65 degrees. 44 00:03:39,783 --> 00:03:44,760 And we can even rotate two, or all three axes at the same time. 45 00:03:44,760 --> 00:03:50,324 So, for example, I'll set the values for x and y to 1. 46 00:03:52,360 --> 00:03:55,060 And now the photo sort of tilts up and 47 00:03:55,060 --> 00:03:58,583 slides back 45 degrees all at the same time. 48 00:03:58,583 --> 00:04:03,808 Now if we rotate all 3 axis by setting the first 3 values to 1. 49 00:04:07,002 --> 00:04:12,250 You can see how this adds a subtle clockwise spin motion to the rotation. 50 00:04:12,250 --> 00:04:16,714 Now, I'm going to set my rotation back to the 180 51 00:04:16,714 --> 00:04:20,340 degree flip rotation on the x axis only. 52 00:04:20,340 --> 00:04:27,380 So I'll leave the value for x as 1, and I'll set the value for y and z back to 0. 53 00:04:27,380 --> 00:04:32,276 And I'll make the rotation value 180 degrees. 54 00:04:35,324 --> 00:04:40,662 So the rotate 3D function makes working with 3D transforms more convenient 55 00:04:40,662 --> 00:04:46,094 because we can efficiently set multiple rotations with one simple function.