Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use css3 to create a dynamic 3D cube. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

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 six div whose class is face represent the six faces of the cube, which are distinguished by the class names from one to six. The exterior contains two layers of containers with id as cube and experiment, both of which are necessary, and 3D effects will not work without either one.

Among them, experiment acts as a lens. Set the focal length on him so that the 3D effect can be displayed on the internal elements.

The perspective attribute defines the depth of the z-axis plane, as well as the relative dimensions of the elements above and below the plane. In general, the smaller the perspective value, the larger the object and the closer it is to you; the higher the perspective value, the smaller the object and the farther away from you. You can check the results through http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html.

The perspective-origin attribute defines the origin of the viewing angle.

Css:

# 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 of the cube setting contain a fixed width and height, and set position to relative. A fixed height and width is required so that elements in the cube can perform 3D animation within a defined area. If you set the height and width to 100%, the elements in the heroine cube will move throughout the page.

Transition is used to set animation-related properties. Transform-style: preserve-3d; makes all the elements in cube as a whole to produce a 3D effect.

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 property uniformly for the six faces of the cube.

Css:

.face {

Position: absolute

Height: 360px

Width: 360px

Padding: 20px

Background-color: rgba (50,50,50,0.7)

}

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

Css:

# 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 you can flip the cube when you press the top and bottom keys.

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)

This is the end of the article on "how to use css3 to create a dynamic 3D cube". I hope the above content can be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.