Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
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.
translate3d()is a shorthand function for
translate3d()accepts three comma-separated values to move an element on the X, Y, and Z axes.
translate3d(x, y, z)
The following translation on the Z-axis:
is equivalent to the shorthand:
transform: translate3d(0, 0, 200px);
Related videos and courses
Just like you're able to rotate elements in multiple directions with the rotate
3D function, CSS has a 3D equivalent of the translate function
that lets you move an element on the x, y and z axis.
With translate3d, you can define a translation on the x, y and
z axis all in one function.
Translate3d is a shorthand function for translate x, translate y and translate z.
So, the function accepts three comma separated values
to move in element on the x, y and z axis respectively.
So, for example, in my 3D cube photo gallery, instead of moving and
positioning the sides using the translateZ and
translateX functions, I can use translate3d.
So in the front rule, let's replace translateZ with translate3d.
I'll set the x and y values to 0,
since the function does not require movement on the x and y axis,
then set the z axis value to 110px.
And down in the left rule, let's change
the translateX function to translate3d,
and this time I'll set the X value to
110px and the Y and Z values to 0.
So translate3d can be useful when you need to define multiple translations for
a 3D element.
You can translate on the x, y, and
z axis all at the same time via one simple function.
So for example, while the photo cube is rotating,
I can add a complex translation using translate3d.
In the photo-cube:hover rule,
I'll add the translate3d function to the transform property.
Then I'll set the x value to 100px,
the y value to -50px and the z value to 50px.
This effect looks pretty neat, but it seems way too intense for
this image gallery.
Now, you can keep the effect or change the values around if you'd like.
It's up to you.
In fact, I highly recommend experimenting with all the different 2D and
3D transform functions and properties so you can get a better feel for
how elements move and behave in 3D space.
As I'm recording this video, 3D transforms are supported in the latest version of all
modern browsers with a few known issues in Firefox and Internet Explorer.
So before using a 3D transform function or property in your projects, be sure
to check a resource like CanIUse.com to see the latest in browser support.
If you want to see more examples and
related videos that teach you how to create amazing UI interactions with
CSS transitions and transforms, check out the links I posted in the teacher's notes.
Remember, we're always here to help.
So if you have questions about anything covered in this course,
feel free to reach out to the Treehouse staff, other students in the community,
or you can get hold of me on Twitter.
I'm @guilh. Thanks, everyone.
You need to sign up for Treehouse in order to download course files.Sign up