Css3 transform 3d use css3 to create a dynamic 3d cube (html5 Practice)

Comments: In today's course, I will show you how to use css3 to create a 3d cube. the operation method is: top, bottom, left, right, and so on, to achieve the inverted rotation effect of the cube, stunned and worth your reference

In today's course, I will show you how to use css3 to create 3d cubes. You can use the following link to view the actual effect and perform the upper and lower keys to flip the cube.
Demo address: Http://www.jb51.net/jiaoben/70022.html
Next, we will introduce how to make the SDK.
Html:

The Code is as follows:
<Div id = "experiment">
<Div id = "cube">
<Div class = "face one">
One face
</Div>
<Div class = "face two">
Up, down, left, right
</Div>
<Div class = "face three">
Lorem ipsum.
</Div>
<Div class = "face four">
New forms of navigation are fun.
</Div>
<Div class = "face five">
Rotating 3D cube
</Div>
<Div class = "face six">
More content
</Div>
</Div>
</Div>

In the preceding html, the six divs with the class as face represent the six faces of the cube respectively. They are distinguished using the class names from one to six. The external container contains a two-layer container with the id cube and experiment. Both layers are required, and the 3d effect is ignored.
Experiment plays the role of the lens. Set the focal length for him so that the 3d effect can be displayed on internal elements.
The perspective attribute defines the depth of the Z axis plane and the relative size of the elements above and below the plane. In general, the smaller the perspective value, the larger the object, the closer it is to you. The larger the perspective value, the smaller the object, and the farther away it is from you. You can use http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html#effect.
The perspective-origin attribute defines the origin of the perspective.
Css:

The Code is as follows:
# Experiment {
-Webkit-perspective: 800;
-Moz-perspective: 800;
-O-perspective: 800;
Perspective: 800;
-Webkit-perspective-origin: 50% 200px;
-Moz-perspective-origin: 50% 200px;
-O-perspective-origin: 50% 200px;
Perspective-origin: 50% 200px;
}

The attributes set by cube contain fixed width and height, and set position to relative. Fixed height and width are required so that elements in the cube can perform 3d animation within a limited area. If you set the height and width to 100%, the elements in the cube are moved across the page.
Transition is used to set animation-related attributes. Transform-style: preserve-3d; makes all elements in the cube a whole for 3d effect.
You can browse idea.
Css:

The Code is as follows:
# Cube {
Position: relative;
Margin: 100px auto;
Height: 400px;
Width: 400px;
-Webkit-transition:-webkit-transform 2 s linear;
-Moz-transition:-moz-transform 2 s linear;
-O-transition:-o-transform 2 s linear;
Transition: transform 2 s linear;
-Webkit-transform-style: preserve-3d;
-Moz-transform-style: preserve-3d;
-O-transform-style: preserve-3d;
Transform-style: preserve-3d;
}

Next, set css attributes for the six faces of the cube.
Css:

The Code is as follows:
. Face {
Position: absolute;
Height: 360px;
Width: 360px;
Padding: 20px;
Background-color: rgba (50, 50, 50, 0.7 );
}

Next, set the 3d attributes of the six faces, use rotateX or rotateY to flip the cube surface orientation, and use translateZ to move the cube surface in a three-dimensional space.
Css:

The Code is as follows:
# Cube. one {
-Webkit-transform: rotateX (90deg) translateZ (200px );
-Moz-transform: rotateX (90deg) translateZ (200px );
-O-transform: rotateX (90deg) translateZ (200px );
Transform: rotateX (90deg) translateZ (200px );
}
# Cube. two {
-Webkit-transform: translateZ (200px );
-Moz-transform: translateZ (200px );
-O-transform: translateZ (200px );
Transform: translateZ (200px );
}
# Cube. three {
-Webkit-transform: rotateY (90deg) translateZ (200px );
-Moz-transform: rotateY (90deg) translateZ (200px );
-O-transform: rotateY (90deg) translateZ (200px );
Transform: rotateY (90deg) translateZ (200px );
}
# Cube. four {
-Webkit-transform: rotateY (180deg) translateZ (200px );
-Moz-transform: rotateY (180deg) translateZ (200px );
-O-transform: rotateY (180deg) translateZ (200px );
Transform: rotateY (180deg) translateZ (200px );
}
# Cube. five {
-Webkit-transform: rotateY (-90deg) translateZ (200px );
-Moz-transform: rotateY (-90deg) translateZ (200px );
-O-transform: rotateY (-90deg) translateZ (200px );
Transform: rotateY (-90deg) translateZ (200px );
}
# Cube. six {
-Webkit-transform: rotateX (-90deg) translateZ (200px );
-Moz-transform: rotateX (-90deg) translateZ (200px );
-O-transform: rotateX (-90deg) translateZ (200px );
Transform: rotateX (-90deg) translateZ (200px );
}

The last thing to do is to bind the keydown event to the page. In this way, when you press the top, bottom, and left keys, the cube is flipped.
Javascript:

The Code is as follows:
Var xAngle = 0, yAngle = 0;
Document. addEventListener ('keylow', function (e)
{
Switch (e. keyCode)
{
Case 37: // left
YAngle-= 90;
Break;
Case 38: // up
XAngle + = 90;
Break;
Case 39: // right
YAngle + = 90;
Break;
Case 40: // down
XAngle-= 90;
Break;
};
$ ('CUBE '). style. webkitTransform = "rotateX (" + xAngle + "deg) rotateY (" + yAngle + "deg )";
}, False );

Here is the course. Next, you can try it.