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.