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

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.

Important Update

Browser rendering for 3D transforms changed since we recorded this video. If your rotating 3D cube does not look and work as it does in the video, add the following properties to the CSS rule selecting each side in interactions.css:

.front,
.back,
.left,
.right {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  /* New CSS */
  transform-style: inherit;
  backface-visibility: hidden;
}

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);

Just like you're able to rotate elements in multiple directions with the rotate 0:00 3D function, CSS has a 3D equivalent of the translate function 0:05 that lets you move an element on the x, y and z axis. 0:10 With translate3d, you can define a translation on the x, y and 0:15 z axis all in one function. 0:19 Translate3d is a shorthand function for translate x, translate y and translate z. 0:22 So, the function accepts three comma separated values 0:30 to move in element on the x, y and z axis respectively. 0:34 So, for example, in my 3D cube photo gallery, instead of moving and 0:38 positioning the sides using the translateZ and 0:43 translateX functions, I can use translate3d. 0:47 So in the front rule, let's replace translateZ with translate3d. 0:52 I'll set the x and y values to 0, 1:01 since the function does not require movement on the x and y axis, 1:05 then set the z axis value to 110px. 1:11 And down in the left rule, let's change 1:19 the translateX function to translate3d, 1:24 and this time I'll set the X value to 1:30 110px and the Y and Z values to 0. 1:35 So translate3d can be useful when you need to define multiple translations for 1:40 a 3D element. 1:45 You can translate on the x, y, and 1:46 z axis all at the same time via one simple function. 1:49 So for example, while the photo cube is rotating, 1:54 I can add a complex translation using translate3d. 1:58 In the photo-cube:hover rule, 2:07 I'll add the translate3d function to the transform property. 2:09 Then I'll set the x value to 100px, 2:16 the y value to -50px and the z value to 50px. 2:21 This effect looks pretty neat, but it seems way too intense for 2:31 this image gallery. 2:35 Now, you can keep the effect or change the values around if you'd like. 2:36 It's up to you. 2:40 In fact, I highly recommend experimenting with all the different 2D and 2:41 3D transform functions and properties so you can get a better feel for 2:47 how elements move and behave in 3D space. 2:51 As I'm recording this video, 3D transforms are supported in the latest version of all 3:02 modern browsers with a few known issues in Firefox and Internet Explorer. 3:06 So before using a 3D transform function or property in your projects, be sure 3:10 to check a resource like CanIUse.com to see the latest in browser support. 3:14 If you want to see more examples and 3:19 related videos that teach you how to create amazing UI interactions with 3:21 CSS transitions and transforms, check out the links I posted in the teacher's notes. 3:26 Remember, we're always here to help. 3:31 So if you have questions about anything covered in this course, 3:33 feel free to reach out to the Treehouse staff, other students in the community, 3:36 or you can get hold of me on Twitter. 3:40 I'm @guilh. Thanks, everyone. 3:42

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

Sign up