css3 transform 3d using css3 to create dynamic 3d cubes (html5 practice)

In today's course, I will introduce you to how to create 3d cubes using css3. You can browse the actual effects through the link below, operate the up and down left and right keys to achieve the flip effect of the cube.

Let’s start with how to make it.

<div id="experiment">

<div id="cube">

<div>

One face

</div>

<div>

Up, down, left, right

</div>

<div>

Lorem ipsum.

</div>

<div>

New forms of navigation are fun.

</div>

<div>

Rotating 3D cube

</div>

<div>

More content

</div>

</div>

</div>

In the html above, the 6 divs with class as face represent the 6 faces of the cube, and they are distinguished using the class names from one to six. The external container contains two layers of containers with id cube and experiment. Both layers are necessary. Without any one, the 3D effect cannot be produced.

Among them, experiment plays the role of the lens. Set the focal length to it so that the 3D effect can be displayed on the internal elements.

The perspective attribute defines the depth of the z-axis plane, and also defines the relative dimensions of 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, the further away from you. You can view the effect through http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html.

The perspective-origin property defines the origin of the perspective.

#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 the cube contain a fixed width and height, and set position to relative. Fixed height and width are necessary so that elements in the cube can perform 3D animations within a defined area. If you set the height and width to 100%, the elements in the cube will move across the entire page range.

transition is used to set animation-related properties. transform-style: preserve-3d; makes all elements in the cube produce 3d effects as a whole.

You can browse http://www.zhangxinxu.com/wordpress/2012/09/CSS3/">css3-3d-transform-perspective-animate-transition/ for more information.

css:

#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 the css attribute for the 6 faces of the cube.

.face {

position: absolute;

height: 360px;

width: 360px;

padding: 20px;

background-color: rgba(50, 50, 50, 0.7);

}

Next, set the 3d related properties of the 6 faces, use rotateX or rotateY to achieve the flip of the cube surface, and use translateZ to achieve the movement of the cube surface in the 3-dimensional space.

#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, so that when you press the up, down, left and right keys, the cube flip motion effect is achieved.

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

That’s all for the course, you can try it out next.