Understanding 3D Transforms

[MUSIC] 0:00 When you watch a movie in 3D the elements on screen appear to jump 0:05 out towards you or move away from you, as if they were there in real life. 0:09 This effect is created by enhancing the illusion of depth perception. 0:13 The effect adds a third dimension to the otherwise flat two-dimensional 0:18 movie screen. 0:22 Computer, tablet, and mobile screens are also flat and two dimensional. 0:23 But with CSS 3d transforms you can add depth to elements on the page and 0:27 create movement towards and away from the viewer like in a 3D movie. 0:32 The transforms you learned in the previous section rotate, scale, 0:36 skew, and translate elements in two dimensional space. 0:41 That is, horizontally and vertically on the x and y axis. 0:45 3D transforms are an extension of 2D transforms. 0:50 They let you simulate 3D space on a screen by introducing 0:54 a 3rd axis called the Z axis. 0:58 The Z axis creates the illusion of depth on a two dimensional screen. 1:01 On the Z axis you can move elements towards or away from the viewer. 1:06 Even rotate and scale them within a 3D perspective. 1:10 You may have already seen 3D transforms on the web. 1:13 For example Amazon.com uses 3D transforms in some of their product pages. 1:17 So, on this page, when a user hovers over the book, it partially opens. 1:22 You can also see the back cover of the book by flipping it, 1:27 then you can flip it back to the front cover. 1:30 Here's another impressive example of 3D transforms an action. 1:33 A 3D book showcase. 1:37 So at first you see a few colorful books on a shelf. 1:40 Then once you hover over a book it tilts back towards you. 1:43 This is all done within a 3D perspective. 1:48 So if you hover over one of the books in the middle, 1:50 you only see the back and top areas of the book when it tilts back. 1:54 But the books that are further away from the middle reveal more 1:59 depth when they tilt back, just like they would in real life. 2:02 The 3D effects in these two examples were created using many of the CSS 2:08 transform concepts you learned in the previous section, 2:13 like rotation, translation, and scaling. 2:17 Once you learn how to define 3D space on the page, 2:20 you can create all sorts of amazing 3D effects using transform properties, 2:23 like this awesome 3D image slider. 2:28 So coming up in the next video, you'll get started using 3D transforms by first 2:34 learning how to activate 3D space on the page 2:39