So you've seen how rotations on the X and Y axis behave in 3D space.

RotateY rotates elements left to right on the Y axis, and

rotateX tilts elements towards and away from us on the X axis.

Earlier you learned that 3D transforms use a third axis called the Z axis.

So that means we can also rotate on the Z axis.

In fact, we can rotate an element on the X, Y, and Z axis all at the same time.

It's one of the cooler parts of transforming in 3D space.

So if you only want a regular clockwise or counter clockwise rotation,

you can still use the rotate function you learned about in the previous section.

So if I change the rotate function in the photo hover rule to rotate and

set the value to 45 degrees,

this produces the same type of rotation, even when in 3D space.

The difference is that now the photos are actually rotating on their Z axis.

But you can also use the rotateZ 3D function to rotate around the Z axis.

As you can see, a rotateZ rotation looks and works the same way as rotate.

As I mentioned earlier,

in 3D space you are able to rotate elements in multiple directions at once.

So CSS has a rotate 3D function you can use to perform

a 3D rotation on the X, Y and Z access, all in one function.

The rotate3d functions accepts four comma separated values.

The first three values set the direction of the rotation on the x,

y and z axis, and the fourth value sets the rotation angle.

Now the values for x, y and

z are always the number of values zero or one, and you'll see why soon.

And the fourth value you can use any angle unit like degree or turn.

So, back on my style sheet, I'm going to change the rotate z function and

the photo hover rule to the rotate 3d function.

I'll set the first 3 values to 0 and the fourth value to 45 degrees.

So no rotation happens in the browser yet.

Why?

Well now we need to set the direction of the rotation by changing any of the x,

y, and z values from 0 to 1.

Changing a value from zero to one, let's the browser know that you want to

rotate the element on that particular axis.

So for instance, if I change the value of X from 0 to 1,

this sort of turns on the rotation for the X axis only.

So now it's going to rotate the photo div 45 degrees on the x axis.

Now I can turn off the rotation for x by setting the first value back to 0,

and then I can set it to rotate on the y axis only,

by changing the second value from 0 to 1.

Now the rotation only happens on the y axis.

Now, if I want a different rotation angle, I can simply change the fourth value.

So, for instance, I'll change it to a rotation of 65 degrees.

And we can even rotate two, or all three axes at the same time.

So, for example, I'll set the values for x and y to 1.

And now the photo sort of tilts up and

slides back 45 degrees all at the same time.

Now if we rotate all 3 axis by setting the first 3 values to 1.

You can see how this adds a subtle clockwise spin motion to the rotation.

Now, I'm going to set my rotation back to the 180

degree flip rotation on the x axis only.

So I'll leave the value for x as 1, and I'll set the value for y and z back to 0.

And I'll make the rotation value 180 degrees.

So the rotate 3D function makes working with 3D transforms more convenient

because we can efficiently set multiple rotations with one simple function.