Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In 3D space you can rotate elements in multiple directions at once. CSS has a rotate3d() function that provides a way to perform a 3D rotation on the X, Y, and Z axes.
Resources
Video review
-
rotateZ()is a 3D function that rotates elements on the Z-axis. - With
rotate3d(), you can rotate on the X, Y and Z axis at the same time. -
rotate3d()accepts four comma-separated values. - The first three values set the direction of the rotation on the x, y, and z axes; the fourth value sets the rotation angle.
rotate3d(x, y, z, <angle>)
Changing a value from 0 to 1 lets the browser know that you want to rotate the element on that particular axis. For example, this rotates .photo 45 degrees on the X-axis only:
.photo:hover {
transform: rotate3d(1, 0, 0, 45deg);
}
rotate3d() makes working with 3D rotations convenient because you can efficiently set multiple rotations with one function.
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
You need to sign up for Treehouse in order to download course files.
Sign up