CSS3 transform to realize 3D cube effect

CSS3 series has been learning for some time, the first article wrote some CSS3 Chine, the original stamp here, but also obtained more support from netizens, in this thank you, your support is I write the article the biggest power ^_^.
Then this article, mainly through a 3D cube effect example to in-depth understanding of the CSS3 transform properties, the following is a screenshot of this example, coupled with animation can rotate Yo, is it cool? Put on a picture of the girl you like, and you can be bold and sexy.

First knowledge of transform

As the name suggests: transform. Can think of it can do a lot of things, this attribute has a lot of values, here simply enumerate:
Translate (x,y), Translatex (x), Translatey (y), Translatez (z), Translate3d (x,y,z): Define the moving distance of the position.

Scale (X,y), ScaleX (x), ScaleY (y), Scalez (z), Scale3d (x,y,z): Defines the scaling ratio of an element.
Rotate (angle), Rotatex (a), Rotatey (a), Rotatez (a), Rotate3d (X,y,z,angle): Defines the angle of rotation of an element.
Skew (X-angle,y-angle), skewx (angle), skewy (angle): Defines the tilt angle of an element.

The cognition of 3D effect

We can see that this is a three-dimensional space map, not to be the first eye of the complexity of the scare, the careful decomposition of the fact is still very clear: anyway, on the x axis, y axis, Z axis three direction.

Imagine, if you are sitting in front of the computer, the center of the computer screen is the original point, the original point to the right is the x-axis positive direction, downward is the Y axis positive direction, to the front of the screen (that is, the face) is the direction of the z axis. The direction of the axis is clear, the above method can be used correctly.
If you feel that the above explanation is still too dull and abstract, then give a life example to correspond to the three rotate attributes (Rotatex, Rotatey, Rotatez):

The following figure: Gymnastics show-rotation around the x axis is Rotatex (the horizontal bar is the X axis)

The following picture: Steel pole Dance show-rotation around the y axis is Rotatey (steel is the y axis)

The following figure: turntable rotation-around the z axis in the rotation is rotatez (imagine a rope through the center of the turntable, the picture is not easy to find = =)

Perspective Property

Perspective's Chinese meaning is: perspective, Perspective! This property is used to activate a 3D space.
When you define the perspective property for an element, its child elements get a perspective effect (elements that use the 3D transform). So generally the perspective attribute is applied to the parent element, and we can refer to the parent element as a stage element.
Just looking at the explanation may still be difficult to understand, let's use an example to say:

As can be seen from the above figure, Div1 is the div2 of the parent element, we start to increase the Div2 element rotation Transform:rotatex (50deg), only feel div2 on the plane was ' compressed ', no 3D effect, Then when we add perspective:150px to the parent element Div1, we can see the 3D effect immediately and feel his magic.
In addition, the value of perspective has been a mystery, after my many times to check and test, came to a few conclusions:
If the value is None or is not set, there is no 3D space.
The smaller the value, the more obvious the 3D effect is, that is, the closer your eyes are to the true 3D.
Looks like when the value is the width of the element, the visual effect is better.

Transform-style

Transform-style specifies how nested elements are rendered in 3D space.
Transform-style:flat | Preserve-3d
Flat is the default value, which means that all child elements are rendered in the 2D plane; Preserve-3d represents all child elements rendered in 3D space.
Therefore, when we want to achieve some 3D effect, transform-style:preserve-3d is indispensable. In general, the Declaration is applied to the parent element of the sibling elements of the 3D transformation, and we can call it a container.

Transform-origin

Transform-origin is used to change the origin position of an element.
It has a number of ways to take the way, the following we through the example (the background of the yellow div clockwise rotation 45deg) to introduce its common value method:
Transform-origin:center (default value, equivalent to: Center center/50% 50%)

Transform-origin:top (equivalent to: Top Center/center top)

Transform-origin:bottom (equivalent to: bottom Center/center bottom)

Transform-origin:right (equivalent to: Right Center/center right)

Transform-origin:left (equivalent to: Left Center/center left)

Transform-origin:top left (equivalent to: Left top)

In the same vein, you can also set to: Transform-origin:top Right (the top right-hand corner is the origin), Transform-origin:bottom right (the bottom right-hand corner is the original point), Transform-origin:bottom Left (the bottom left-hand corner is the original point)
Draw Cube Effect

You reader can't wait, say so much ' nonsense ', the play of this article finally came!

<div class= "Rect-wrap" >//Stage elements, setting perspective, so that its child elements get perspective effects.
<div class= "Container" >//Container, set transform-style:preserve-3d to render child elements in 3D space
<div class= "Top slide" ></div>//Cube six faces
<div class= "Bottom Slide" ></div>
<div class= "left slide" ></div>
<div class= "Right Slide" ></div>
<div class= "Front slide" ></div>
<div class= "Back Slide" ></div>
</div>
</div>

CSS Code

For stage elements

. rect-wrap {
position:relative;
perspective:1600px;
}

For containers

. container {
width:800px;
height:800px;
transform-style:preserve-3d;
transform-origin:50% 50% 200px; Set the origin of the 3d space to move the 200px position in the center of the plane to the z axis
}

Each face of the cube

. Slide {
width:400px;
height:400px;
Position:absolute; Positioning
}

Cube Top

. Top {
left:200px;
Top: -200px;
Transform:rotatex ( -90DEG);
Transform-origin:bottom;
}

Cube Bottom

. Top {
left:200px;
Bottom: -200px;
Transform:rotatex (90DEG);
Transform-origin:top;
}

Cube left

. Top {
Left: -200px;
top:200px;
Transform:rotatey (90DEG);
Transform-origin:right;
}

Cube to the right

. Top {
left:600px;
top:200px;
Transform:rotatey ( -90DEG);
Transform-origin:left;
}

Cube Front

. Top {
left:200px;
top:200px;
Transform:translatez (400px); The cube is facing the screen, so don't rotate, just move the distance to the front of the z axis.
}

Behind the Cube

. Top {
left:200px;
top:200px;
Transform:translatez (0); The cube is right behind the screen, so don't rotate, just move the distance to the z axis.
}

Finally, don't forget to add a picture to each of the different faces, position, and so on a little bit, the cool cube is done.
Add animation

Finally we wanted the cube to move itself, and I defined an animation that reader could try.

@keyframes Rotate-frame {
0% {
Transform:rotatex (0deg) Rotatey (0deg);
}
10% {
Transform:rotatex (0deg) Rotatey (180deg);
}
20% {
Transform:rotatex ( -180deg) Rotatey (180deg);
}
30% {
Transform:rotatex ( -360deg) Rotatey (180deg);
}
40% {
Transform:rotatex ( -360deg) Rotatey (360deg);
}
50% {
Transform:rotatex ( -180deg) Rotatey (360deg);
}
60% {
Transform:rotatex (90deg) Rotatey (180deg);
}
70% {
Transform:rotatex (0) Rotatey (180deg);
}
80% {
Transform:rotatex (90deg) Rotatey (90deg);
}
90% {
Transform:rotatex (90deg) rotatey (0);
}
100% {
Transform:rotatex (0) rotatey (0);
}
}

Finally, this animation is used on the container element of this cube, OK:

. container{

Animation:rotate-frame 30s linear infinite;
}

Summarize

In a word, in the course of my study of CSS3, see a lot of new features, but also learned how to use, but I want to say is that we do not have to learn how to use, but also to understand how each line of code produces the corresponding effect, especially for 3D transform, we have to understand the fundamental to the 3D space, In order to better grasp the value of each of its attributes can bring about the effect.
This article is a little bit more content, I recorded this article at the same time to the effect of the study to consolidate a piece, or quite happy. At the same time also hope to you reader in the future learning 3D transform on the road played a little role!