Build a Rotating 3D Cube

Okay, so in this video, you're going to use what you've learned about 3D 0:00 Transforms, to build this awesome rotating photo cube gallery. 0:04 You'll need to launch the workspace on this page 0:09 to follow along using the latest files. 0:12 You can also download the files and follow along with your own text editor. 0:14 In the latest index.html file, 0:19 you'll see three cube container divs containing the photo cube wrapper. 0:22 And nested inside are three images and a div containing 0:28 the photo cube's title, description, and button like you've seen in other lessons. 0:33 These four nested elements have a class of front, back, left, and right. 0:38 Now a full cube has six sides, but we're only going to create four sides, all but 0:44 the top and bottom sides, since we're not going to see them in the rotation. 0:50 But you can add them later if you want. 0:54 So first I'm going to enable 3D space for 0:57 each cube container div using the perspective property. 1:00 So back in my style sheet, 1:06 I'll add the perspective property to the cube container rule. 1:07 And I'll set the perspective value to 800 pixels. 1:13 This sets individual 3D perspectives for each cube. 1:18 It will apply the same perspective to every photo cube and 1:22 make all rotations look consistent, just like the photos in the previous lesson. 1:26 Now, we're gonna apply the main, animated rotation to the photo cube div. 1:32 So back in my style sheet, I'll create a new rule 1:38 that targets the class photo-cube and add a transition property. 1:42 Now I want to transition the transform property, so 1:51 I'm going to type transform as the transition property value. 1:55 Then I'll add a duration of two seconds, and I'll use a timing function of 1:59 ease in out, so the rotation gradually starts and stops. 2:04 Each photo cube will be 220 pixels wide and 200 pixels tall. 2:12 So I'll add a width of 220 pixels. 2:17 And a height of 200 pixels. 2:22 Next, I'll need to pass the 3D space from cube container 2:27 down to the children of photo cube. 2:31 That way each side can be a 3D transformed element, 2:34 just like we did earlier in the flipping rotation. 2:37 I can do this using the transform style property and 2:42 setting the value to preserve 3D. 2:47 Next, I'll give the photo cube div a rotation on the y axis on hover. 2:53 So I'll create a new rule that targets photo cube on hover. 2:58 Then add the transform property, and this time I'm going to use the rotate 3:06 y function, and I'll set the rotation to negative 270 degrees. 3:12 So here, I'm using a negative value so the photo cube rotates from right to the left. 3:18 And I don't want to rotate the cube a full 360 degrees, 3:25 because I want it to stop on the back side. 3:29 That way, we're able to see the title, description and Download button, 3:32 like we're seeing here in the final example. 3:36 Next, I'll target all four sides of the cube and 3:42 one rule, and apply width, height, and layout styles. 3:45 So, I'll create a new rule that targets 3:49 the class front, back, left and right. 3:54 >> Inside the rule I'll set the width and height to be 100% 4:01 the width and height of their parent Photo cube deep. 4:07 So, I'll say width 100%, 4:12 and height 100%. 4:16 And since three out of the four sides are images, 4:20 I'm going to set their display to block. 4:24 Then I'll position all four sides within the boundaries of the photocube div 4:32 with absolute positioning. 4:36 Now, we could also target all four sides with a single class, but 4:42 I'm simply listing them out here for 4:47 this demo, so you can see exactly what elements are being selected. 4:48 When we preview the workspace in the browser, 4:53 we're able to see one side of the photo cube. 4:55 So now, we're actually going to start building the actual 3D cube, 4:59 by positioning each side using a combination of rotate and 5:03 translate functions along with the transform origin property. 5:07 So I want to place the front side of the cube front and center on the Z axis. 5:12 It should be the first side the viewer sees. 5:17 So I'll need to move, 5:20 or translate, the front side towards the viewer on the Z axis. 5:21 3D Transform has a translate Z function 5:27 that lets you move an element along its Z axis. 5:30 That is, towards and away from the viewer. 5:33 Back in my style sheet, I'll create a new rule that targets the class front. 5:36 And I'll apply a transform using translateZ. 5:42 In the translateZ function, a negative value like 5:50 -200px moves the element away from the viewer on the z axis. 5:54 And a positive value moves the element towards the viewer, so 6:00 I'm going to set the value to 110 pixels. 6:04 Remember the width of each side of the cube is 220 pixels, so 6:09 here I'm using the value 110 pixels, or half of that width, 6:14 to move the front side towards us from the default center position. 6:20 All right, so now I need to do the opposite for the back side. 6:25 I'll create a new rule that targets the class back, 6:30 then I'll add a transform property. 6:36 Now I'll move this side away from us on the Z axis using the translate Z function. 6:38 And this time, I'll use a value of -110 pixels. 6:46 Then I'll position the back side in place using a rotateY of 270 degrees, 6:51 and a transform origin value of center left. 6:58 So this shifts the back side perfectly into place and rotates it so 7:07 that its front facing side displays the text appropriately, not backwards. 7:12 So great, our cube is starting to come together. 7:18 Next, let's position the left side of the cube. 7:25 So back in my CSS, I'll create a new rule that targets the class left and 7:29 add a transform property. 7:35 I'll position it to the side using a rotateY of -273 degrees, 7:37 and moving it horizontally with a translate X of 110 pixels. 7:44 Then I'll shift it into place with a transform origin value of top right. 7:51 All right, so we have one more side of the cube to go. 7:57 Now, the right side of the cube should be the farthest side back initially. 8:04 I'm going to position it further back on the Z axis using translateZ. 8:10 So back in my style sheet, I'll create a new rule, that targets the class right. 8:15 And apply a transform, using the translateZ function. 8:22 And I'll move it further back on the z access, with the value negative, 8:30 110 pixels. 8:35 And now I'll position this side into place with a rotateY of 180 degrees. 8:36 All right, so we've now completed our rotating 3D cube. 8:44 It looks pretty fantastic, doesn't it? 8:49 Now, to change the rotation axis of the photo cube, 8:52 you can simply change the rotateY function. 8:56 Inside photo-cube hover to rotateX. 8:59 So now the cubes rotate from top to bottom, and since there are no top and 9:08 bottom sides to each cube, 9:13 you can clearly see how the sides are positioned to form a cube. 9:14 And as I mentioned earlier, you can try adding the top and 9:19 bottom sides of the cube later on. 9:22