1
00:00:00,640 --> 00:00:05,650
Just like you're able to rotate elements
in multiple directions with the rotate

2
00:00:05,650 --> 00:00:10,690
3D function, CSS has a 3D equivalent
of the translate function

3
00:00:10,690 --> 00:00:15,302
that lets you move an element on the x,
y and z axis.

4
00:00:15,302 --> 00:00:19,870
With translate3d, you can define
a translation on the x, y and

5
00:00:19,870 --> 00:00:22,810
z axis all in one function.

6
00:00:22,810 --> 00:00:30,300
Translate3d is a shorthand function for
translate x, translate y and translate z.

7
00:00:30,300 --> 00:00:34,220
So, the function accepts
three comma separated values

8
00:00:34,220 --> 00:00:38,910
to move in element on the x,
y and z axis respectively.

9
00:00:38,910 --> 00:00:43,840
So, for example, in my 3D cube photo
gallery, instead of moving and

10
00:00:43,840 --> 00:00:47,780
positioning the sides
using the translateZ and

11
00:00:47,780 --> 00:00:52,010
translateX functions,
I can use translate3d.

12
00:00:52,010 --> 00:00:58,510
So in the front rule,
let's replace translateZ with translate3d.

13
00:01:01,870 --> 00:01:05,840
I'll set the x and y values to 0,

14
00:01:05,840 --> 00:01:11,400
since the function does not require
movement on the x and y axis,

15
00:01:11,400 --> 00:01:19,110
then set the z axis value to 110px.

16
00:01:19,110 --> 00:01:24,706
And down in the left rule, let's change

17
00:01:24,706 --> 00:01:30,798
the translateX function to translate3d,

18
00:01:30,798 --> 00:01:35,735
and this time I'll set the X value to

19
00:01:35,735 --> 00:01:40,855
110px and the Y and Z values to 0.

20
00:01:40,855 --> 00:01:45,793
So translate3d can be useful when you
need to define multiple translations for

21
00:01:45,793 --> 00:01:46,760
a 3D element.

22
00:01:46,760 --> 00:01:49,794
You can translate on the x, y, and

23
00:01:49,794 --> 00:01:54,900
z axis all at the same time
via one simple function.

24
00:01:54,900 --> 00:01:58,820
So for example,
while the photo cube is rotating,

25
00:01:58,820 --> 00:02:03,440
I can add a complex
translation using translate3d.

26
00:02:07,784 --> 00:02:09,948
In the photo-cube:hover rule,

27
00:02:09,948 --> 00:02:14,060
I'll add the translate3d function
to the transform property.

28
00:02:16,770 --> 00:02:21,430
Then I'll set the x value to 100px,

29
00:02:21,430 --> 00:02:27,230
the y value to -50px and
the z value to 50px.

30
00:02:31,495 --> 00:02:35,025
This effect looks pretty neat,
but it seems way too intense for

31
00:02:35,025 --> 00:02:36,955
this image gallery.

32
00:02:36,955 --> 00:02:40,975
Now, you can keep the effect or
change the values around if you'd like.

33
00:02:40,975 --> 00:02:41,485
It's up to you.

34
00:02:41,485 --> 00:02:47,255
In fact, I highly recommend experimenting
with all the different 2D and

35
00:02:47,255 --> 00:02:51,425
3D transform functions and properties so
you can get a better feel for

36
00:02:51,425 --> 00:02:54,285
how elements move and behave in 3D space.

37
00:03:02,263 --> 00:03:06,440
As I'm recording this video, 3D transforms
are supported in the latest version of all

38
00:03:06,440 --> 00:03:10,430
modern browsers with a few known issues
in Firefox and Internet Explorer.

39
00:03:10,430 --> 00:03:14,890
So before using a 3D transform function or
property in your projects, be sure

40
00:03:14,890 --> 00:03:18,640
to check a resource like CanIUse.com
to see the latest in browser support.

41
00:03:19,830 --> 00:03:21,680
If you want to see more examples and

42
00:03:21,680 --> 00:03:26,110
related videos that teach you how to
create amazing UI interactions with

43
00:03:26,110 --> 00:03:31,410
CSS transitions and transforms, check out
the links I posted in the teacher's notes.

44
00:03:31,410 --> 00:03:33,200
Remember, we're always here to help.

45
00:03:33,200 --> 00:03:36,494
So if you have questions about
anything covered in this course,

46
00:03:36,494 --> 00:03:40,642
feel free to reach out to the Treehouse
staff, other students in the community,

47
00:03:40,642 --> 00:03:42,480
or you can get hold of me on Twitter.

48
00:03:42,480 --> 00:03:44,859
I'm @guilh.
Thanks, everyone.