- Understanding 3D Transforms 2:42
- Activate 3D Space with perspective 6:47
- Create a Flipping Animation with 3D Transform Properties 10:09
- 3-Dimensional Rotations with rotateZ() and rotate3d() 4:47
- Changing the Viewing Position with perspective-origin 4:46
- 3D Transforms Challenge 2 objectives
- Creating a Consistent Depth Perspective 2:39
- Build a Rotating 3D Cube 9:31
- Moving Content with translate3d() 3:44
- Review: 3D Transforms 6 questions
Preview
Video Player
00:00
00:00
Build a Rotating 3D Cube
9:31In this video, you will build a rotating 3D photo cube using CSS transitions and 3D transforms.
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