Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Moving Content with translate3d()

3:44 with Guil Hernandez

With translate3d(), you can define a translation on the X, Y and Z axes, all in one function.

Resources

Video review

  • translate3d() is a shorthand function for translateX(), translateY() and translateZ().
  • translate3d() accepts three comma-separated values to move an element on the X, Y, and Z axes.

Function syntax:

translate3d(x,  y,  z)

The following translation on the Z-axis:

transform: translateZ(200px);

is equivalent to the shorthand:

transform: translate3d(0, 0, 200px);

Related videos and courses

  • 0:00

    Just like you're able to rotate elements in multiple directions with the rotate

  • 0:05

    3D function, CSS has a 3D equivalent of the translate function

  • 0:10

    that lets you move an element on the x, y and z axis.

  • 0:15

    With translate3d, you can define a translation on the x, y and

  • 0:19

    z axis all in one function.

  • 0:22

    Translate3d is a shorthand function for translate x, translate y and translate z.

  • 0:30

    So, the function accepts three comma separated values

  • 0:34

    to move in element on the x, y and z axis respectively.

  • 0:38

    So, for example, in my 3D cube photo gallery, instead of moving and

  • 0:43

    positioning the sides using the translateZ and

  • 0:47

    translateX functions, I can use translate3d.

  • 0:52

    So in the front rule, let's replace translateZ with translate3d.

  • 1:01

    I'll set the x and y values to 0,

  • 1:05

    since the function does not require movement on the x and y axis,

  • 1:11

    then set the z axis value to 110px.

  • 1:19

    And down in the left rule, let's change

  • 1:24

    the translateX function to translate3d,

  • 1:30

    and this time I'll set the X value to

  • 1:35

    110px and the Y and Z values to 0.

  • 1:40

    So translate3d can be useful when you need to define multiple translations for

  • 1:45

    a 3D element.

  • 1:46

    You can translate on the x, y, and

  • 1:49

    z axis all at the same time via one simple function.

  • 1:54

    So for example, while the photo cube is rotating,

  • 1:58

    I can add a complex translation using translate3d.

  • 2:07

    In the photo-cube:hover rule,

  • 2:09

    I'll add the translate3d function to the transform property.

  • 2:16

    Then I'll set the x value to 100px,

  • 2:21

    the y value to -50px and the z value to 50px.

  • 2:31

    This effect looks pretty neat, but it seems way too intense for

  • 2:35

    this image gallery.

  • 2:36

    Now, you can keep the effect or change the values around if you'd like.

  • 2:40

    It's up to you.

  • 2:41

    In fact, I highly recommend experimenting with all the different 2D and

  • 2:47

    3D transform functions and properties so you can get a better feel for

  • 2:51

    how elements move and behave in 3D space.

  • 3:02

    As I'm recording this video, 3D transforms are supported in the latest version of all

  • 3:06

    modern browsers with a few known issues in Firefox and Internet Explorer.

  • 3:10

    So before using a 3D transform function or property in your projects, be sure

  • 3:14

    to check a resource like CanIUse.com to see the latest in browser support.

  • 3:19

    If you want to see more examples and

  • 3:21

    related videos that teach you how to create amazing UI interactions with

  • 3:26

    CSS transitions and transforms, check out the links I posted in the teacher's notes.

  • 3:31

    Remember, we're always here to help.

  • 3:33

    So if you have questions about anything covered in this course,

  • 3:36

    feel free to reach out to the Treehouse staff, other students in the community,

  • 3:40

    or you can get hold of me on Twitter.

  • 3:42

    I'm @guilh. Thanks, everyone.

You need to sign up for Treehouse in order to download course files.

Sign up