Okay, so in this video, you're going to use what you've learned about 3D

Transforms, to build this awesome rotating photo cube gallery.

You'll need to launch the workspace on this page

to follow along using the latest files.

You can also download the files and follow along with your own text editor.

In the latest index.html file,

you'll see three cube container divs containing the photo cube wrapper.

And nested inside are three images and a div containing

the photo cube's title, description, and button like you've seen in other lessons.

These four nested elements have a class of front, back, left, and right.

Now a full cube has six sides, but we're only going to create four sides, all but

the top and bottom sides, since we're not going to see them in the rotation.

But you can add them later if you want.

So first I'm going to enable 3D space for

each cube container div using the perspective property.

So back in my style sheet,

I'll add the perspective property to the cube container rule.

And I'll set the perspective value to 800 pixels.

This sets individual 3D perspectives for each cube.

It will apply the same perspective to every photo cube and

make all rotations look consistent, just like the photos in the previous lesson.

Now, we're gonna apply the main, animated rotation to the photo cube div.

So back in my style sheet, I'll create a new rule

that targets the class photo-cube and add a transition property.

Now I want to transition the transform property, so

I'm going to type transform as the transition property value.

Then I'll add a duration of two seconds, and I'll use a timing function of

ease in out, so the rotation gradually starts and stops.

Each photo cube will be 220 pixels wide and 200 pixels tall.

So I'll add a width of 220 pixels.

And a height of 200 pixels.

Next, I'll need to pass the 3D space from cube container

down to the children of photo cube.

That way each side can be a 3D transformed element,

just like we did earlier in the flipping rotation.

I can do this using the transform style property and

setting the value to preserve 3D.

Next, I'll give the photo cube div a rotation on the y axis on hover.

So I'll create a new rule that targets photo cube on hover.

Then add the transform property, and this time I'm going to use the rotate

y function, and I'll set the rotation to negative 270 degrees.

So here, I'm using a negative value so the photo cube rotates from right to the left.

And I don't want to rotate the cube a full 360 degrees,

because I want it to stop on the back side.

That way, we're able to see the title, description and Download button,

like we're seeing here in the final example.

Next, I'll target all four sides of the cube and

one rule, and apply width, height, and layout styles.

So, I'll create a new rule that targets

the class front, back, left and right.

>> Inside the rule I'll set the width and height to be 100%

the width and height of their parent Photo cube deep.

So, I'll say width 100%,

and height 100%.

And since three out of the four sides are images,

I'm going to set their display to block.

Then I'll position all four sides within the boundaries of the photocube div

with absolute positioning.

Now, we could also target all four sides with a single class, but

I'm simply listing them out here for

this demo, so you can see exactly what elements are being selected.

When we preview the workspace in the browser,

we're able to see one side of the photo cube.

So now, we're actually going to start building the actual 3D cube,

by positioning each side using a combination of rotate and

translate functions along with the transform origin property.

So I want to place the front side of the cube front and center on the Z axis.

It should be the first side the viewer sees.

So I'll need to move,

or translate, the front side towards the viewer on the Z axis.

3D Transform has a translate Z function

that lets you move an element along its Z axis.

That is, towards and away from the viewer.

Back in my style sheet, I'll create a new rule that targets the class front.

And I'll apply a transform using translateZ.

In the translateZ function, a negative value like

-200px moves the element away from the viewer on the z axis.

And a positive value moves the element towards the viewer, so

I'm going to set the value to 110 pixels.

Remember the width of each side of the cube is 220 pixels, so

here I'm using the value 110 pixels, or half of that width,

to move the front side towards us from the default center position.

All right, so now I need to do the opposite for the back side.

I'll create a new rule that targets the class back,

then I'll add a transform property.

Now I'll move this side away from us on the Z axis using the translate Z function.

And this time, I'll use a value of -110 pixels.

Then I'll position the back side in place using a rotateY of 270 degrees,

and a transform origin value of center left.

So this shifts the back side perfectly into place and rotates it so

that its front facing side displays the text appropriately, not backwards.

So great, our cube is starting to come together.

Next, let's position the left side of the cube.

So back in my CSS, I'll create a new rule that targets the class left and

add a transform property.

I'll position it to the side using a rotateY of -273 degrees,

and moving it horizontally with a translate X of 110 pixels.

Then I'll shift it into place with a transform origin value of top right.

All right, so we have one more side of the cube to go.

Now, the right side of the cube should be the farthest side back initially.

I'm going to position it further back on the Z axis using translateZ.

So back in my style sheet, I'll create a new rule, that targets the class right.

And apply a transform, using the translateZ function.

And I'll move it further back on the z access, with the value negative,

110 pixels.

And now I'll position this side into place with a rotateY of 180 degrees.

All right, so we've now completed our rotating 3D cube.

It looks pretty fantastic, doesn't it?

Now, to change the rotation axis of the photo cube,

you can simply change the rotateY function.

Inside photo-cube hover to rotateX.

So now the cubes rotate from top to bottom, and since there are no top and

bottom sides to each cube,

you can clearly see how the sides are positioned to form a cube.

And as I mentioned earlier, you can try adding the top and

bottom sides of the cube later on.