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
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 fortranslateX()
,translateY()
andtranslateZ()
. -
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
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