CSS3 Transform Properties 3D Cube Effect Example

Example Tutorial:

Mainly through a 3D cube effect example to in-depth understanding of the CSS3 transform properties, the following is a screenshot of the example, coupled with animation can also rotate Yo, is it cool? Put on a picture of the girl you like, you can be bold sister, haha!

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!

DOM structure

stage element, set the perspective, and let its child elements get a perspective effect.
//container, set transform-style:preserve-3d, let its child elements in 3D space rendering//cube six faces

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 3d space in the center of the plane and then move the 200px position to the z axis
}

Each face of the cube

. slide {
width:400px;
height:400px;
Position:absolute; Locate
}

Cube Top

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

Cube Bottom

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

Cube left

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

Cube to the right

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

Cube Front

. front {
left:200px;
top:200px;
Transform:translatez (400px);
//The cube front is facing the screen, so do not rotate, just move the distance forward to the Z axis

Behind the Cube

. back {
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);    &NBSP}     10% {        
Transform: rotatex (0deg)  rotatey (180deg);    &NBSP}     20% {        
Transform: rotatex ( -180deg)  rotatey (180deg);    &NBSP}     30% {        
Transform: rotatex ( -360deg)  rotatey (180deg);    &NBSP}     40% {        
Transform: rotatex ( -360deg)  rotatey (360deg);    &NBSP}     50% {        
Transform: rotatex ( -180deg)  rotatey (360deg);   &nbSP;&NBSP}     60% {        transform: 
Rotatex (90deg)  rotatey (180deg);    &NBSP}     70% {        
Transform: rotatex (0)  rotatey (180deg);    &NBSP}     80% {        
Transform: rotatex (90deg)  rotatey (90deg);    &NBSP}     90% {        
Transform: rotatex (90deg)  rotatey (0);    &NBSP}     100% {        
Transform: rotatex (0)  rotatey (0);    &NBSP}}

Finally, this animation is used on the container elements of this cube, and the CSS3 transform property 3D Cube Effect example is over.