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