1 00:00:00,000 --> 00:00:05,103 [MUSIC] 2 00:00:05,103 --> 00:00:09,113 When you watch a movie in 3D the elements on screen appear to jump 3 00:00:09,113 --> 00:00:13,657 out towards you or move away from you, as if they were there in real life. 4 00:00:13,657 --> 00:00:18,094 This effect is created by enhancing the illusion of depth perception. 5 00:00:18,094 --> 00:00:22,919 The effect adds a third dimension to the otherwise flat two-dimensional 6 00:00:22,919 --> 00:00:23,950 movie screen. 7 00:00:23,950 --> 00:00:27,800 Computer, tablet, and mobile screens are also flat and two dimensional. 8 00:00:27,800 --> 00:00:32,200 But with CSS 3d transforms you can add depth to elements on the page and 9 00:00:32,200 --> 00:00:36,780 create movement towards and away from the viewer like in a 3D movie. 10 00:00:36,780 --> 00:00:41,150 The transforms you learned in the previous section rotate, scale, 11 00:00:41,150 --> 00:00:45,400 skew, and translate elements in two dimensional space. 12 00:00:45,400 --> 00:00:50,200 That is, horizontally and vertically on the x and y axis. 13 00:00:50,200 --> 00:00:54,080 3D transforms are an extension of 2D transforms. 14 00:00:54,080 --> 00:00:58,390 They let you simulate 3D space on a screen by introducing 15 00:00:58,390 --> 00:01:01,730 a 3rd axis called the Z axis. 16 00:01:01,730 --> 00:01:06,030 The Z axis creates the illusion of depth on a two dimensional screen. 17 00:01:06,030 --> 00:01:10,010 On the Z axis you can move elements towards or away from the viewer. 18 00:01:10,010 --> 00:01:13,910 Even rotate and scale them within a 3D perspective. 19 00:01:13,910 --> 00:01:17,240 You may have already seen 3D transforms on the web. 20 00:01:17,240 --> 00:01:22,460 For example Amazon.com uses 3D transforms in some of their product pages. 21 00:01:22,460 --> 00:01:27,310 So, on this page, when a user hovers over the book, it partially opens. 22 00:01:27,310 --> 00:01:30,850 You can also see the back cover of the book by flipping it, 23 00:01:30,850 --> 00:01:33,830 then you can flip it back to the front cover. 24 00:01:33,830 --> 00:01:37,720 Here's another impressive example of 3D transforms an action. 25 00:01:37,720 --> 00:01:40,020 A 3D book showcase. 26 00:01:40,020 --> 00:01:43,700 So at first you see a few colorful books on a shelf. 27 00:01:43,700 --> 00:01:48,150 Then once you hover over a book it tilts back towards you. 28 00:01:48,150 --> 00:01:50,640 This is all done within a 3D perspective. 29 00:01:50,640 --> 00:01:54,320 So if you hover over one of the books in the middle, 30 00:01:54,320 --> 00:01:59,250 you only see the back and top areas of the book when it tilts back. 31 00:01:59,250 --> 00:02:02,483 But the books that are further away from the middle reveal more 32 00:02:02,483 --> 00:02:05,728 depth when they tilt back, just like they would in real life. 33 00:02:08,544 --> 00:02:13,341 The 3D effects in these two examples were created using many of the CSS 34 00:02:13,341 --> 00:02:17,325 transform concepts you learned in the previous section, 35 00:02:17,325 --> 00:02:20,510 like rotation, translation, and scaling. 36 00:02:20,510 --> 00:02:23,601 Once you learn how to define 3D space on the page, 37 00:02:23,601 --> 00:02:28,387 you can create all sorts of amazing 3D effects using transform properties, 38 00:02:28,387 --> 00:02:30,681 like this awesome 3D image slider. 39 00:02:34,605 --> 00:02:39,162 So coming up in the next video, you'll get started using 3D transforms by first 40 00:02:39,162 --> 00:02:41,720 learning how to activate 3D space on the page