css3 transform 3d Use css3 to create a dynamic 3d cube (html5 practice)_html5 tutorial skills

In today’s course, I will introduce to you how to use css3 to create a 3D cube. You can browse the actual effect through the link below, and operate the up, down, left and right keys to achieve the cube flipping effect.
Demo address: http://www.jb51.net/jiaoben/70022.html
Let’s start with how to make it.
html:

Copy the code

The code is as follows:

One face

Up, down, left, right

Lorem ipsum.

New forms of navigation are fun.

Rotating 3D cube

More content

In the above html, the 6 divs with class face represent the 6 sides of the cube respectively, using classes from one to six Names distinguish them. The outside contains two layers of containers with IDs of cube and experiment. Both layers are necessary. Without either one, the 3D effect cannot be produced.
The experiment plays the role of a lens. Set the focus on it so that the 3D effect is shown on the inner elements. The
perspective attribute defines the depth of the z-axis plane and also defines the relative sizes of elements above and below the plane. In general, the smaller the perspective value, the larger the object is and the closer it is to you; the larger the perspective value is, the smaller the object is and the farther it is from you. You can check the effect at http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html.
The perspective-origin attribute defines the origin of the perspective.
css:

Copy code

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 properties set by cube contain fixed width and height, and position is set to relative. Fixed height and width are necessary so that the 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 will move throughout the page.
Transition is used to set animation-related attributes. transform-style: preserve-3d; causes all elements in the cube to produce a 3D effect as a whole.
You can visit http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/ for more information.
css:

Copy code

The code is as follows:

#cube {
position: relative;
margin: 100px auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-moz-transition : -moz-transform 2s linear;
-o-transition: -o-transform 2s linear;
transition: transform 2s linear;
-webkit-transform-style: preserve-3d;
- moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

Next Set css properties uniformly for the 6 faces of the cube.
css:

Copy code

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 related attributes of the six faces, use rotateX or rotateY to flip the cube surface orientation, and use translateZ to move the cube surface in the 3D space. .
css:

Copy code

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);
}

最后要做的是为页面绑定keydown事件，这样当你按下上下左右键的时候，实现立方体的翻转运动效果。
javascript：

复制代码

代码如下:

var xAngle = 0, yAngle = 0;
document.addEventListener('keydown', 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);

课程就讲到这里，接下来大家可以动手尝试一下。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn