Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, you will build a rotating 3D photo cube using CSS transitions and 3D transforms.
Important Update
Browser rendering for 3D transforms changed since we recorded this video. If your rotating 3D cube does not look and work as it does in the video, add the following properties to the CSS rule selecting each side in interactions.css:
.front,
.back,
.left,
.right {
width: 100%;
height: 100%;
display: block;
position: absolute;
/* New CSS */
transform-style: inherit;
backface-visibility: hidden;
}
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.
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
You need to sign up for Treehouse in order to download course files.
Sign up