Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Transitions and Transforms

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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

4:47 with Guil Hernandez

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up