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

This article will explain in detail how to achieve 3D cube rotation animation with HTML5+CSS3. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Effect picture:

Knowledge points:

1. Review of perspective and transform

2. CSS3 backgroud implements the grid background, that is, the small grid on the face.

3. @-webkit-keyframes to realize animation

HTML:

In the previous 3D product display, we have already talked about how to make a cube, and there are numbers on it, which is theoretically more complicated than this, although we won't say much here.

CSS:

Html {background:-webkit-radial-gradient (center, ellipse, # 430d6d 0%, # 000000); background: radial-gradient (ellipse at center, # 430d6d 0%, # 100%); height: 100%;} .stage {- webkit-perspective: 1000px; width: 20mm; height: 20em Left: 50%; top: 50%; margin-left:-10em; margin-top:-10em; position: absolute;} .cube {position: absolute; width: 100%; height: 100%;-webkit-transform-style: preserve-3d -webkit-transform: rotateX (- 20deg) rotateY (- 20deg) Background:-webkit-linear-gradient (left, rgba (54,226,248,0.5) 0px, rgba (54,226,248,0.5) 3px, rgba (0,0,0,0) 0px),-webkit-linear-gradient (top, rgba (54,226,248,0.5) 0px, rgba (54,226,248,0.5) 3px, rgba (0,0,0,0) 0px) -webkit-background-size: 2.5em 2.5mm; background-color: rgba (0,0,0,0.5); position: absolute; width: 100%; height: 100%; border: 2px solid rgba (54,226,248,0.5);-webkit-box-shadow: 00 5em rgba (0,128,0,0.4) } .font {- webkit-transform: translateZ (10em);} .back {- webkit-transform: rotateX (180deg) translateZ (10em);} .left {- webkit-transform: rotateY (- 90deg) translateZ (10em) } .right {- webkit-transform: rotateY (90deg) translateZ (10em); .top {- webkit-transform: rotateX (90deg) translateZ (10em);} .bottom {- webkit-transform: rotateX (- 90deg) translateZ (10em);}

Similarly: stage as the stage, cube sets the effect of child elements to 3D, and then each face is rotated and translateZ is set to form a cube.

Set the backgroud to set the small grid code for each face:

Background:-webkit-linear-gradient (left, rgba (54,226,248,0.5) 0px, rgba (54,226,248,0.5) 3px, rgba (0,0,0,0) 0px),-webkit-linear-gradient (top, rgba (54,226,248,0.5) 0px Rgba (54,226,248,0.5) 3px, rgba (0,0,0,0) 0px) -webkit-background-size: 2.5em 2.5em

Background settings, 3-pixel bars from left to right, 3-pixel bars from top to bottom, then set the background size to 2.5em 2.5em, and then repeat the background, the effect is as follows (I added a border):

Now the full effect:

You can see that the cube has been formed, and finally add the animation on the line, do not think the animation is very complex, in fact, it is very simple ~

Define an animation frame:

@-webkit-keyframes spin {from {- webkit-transform: translateZ (- 10em) rotateX (0) rotateY (0deg); transform: translateZ (- 10em) rotateX (0) rotateY (0deg);} to {- webkit-transform: translateZ (- 10em) rotateX (360deg) rotateY (360deg) Transform: translateZ (- 10em) rotateX (360deg) rotateY (360deg);}}

The name is spin, which starts with translateZ (- 10em) rotateX (0) rotateY (0deg) and ends with translateZ (- 10em) rotateX (360deg) rotateY (360deg); that is, it rotates 360 degrees around the x-ray axis at the same time.

Finally, add this animation attribute to our cube:

.cube {- webkit-animation: 6s spin linear infinite; position: absolute; width: 100%; height: 100%;-webkit-transform-style: preserve-3d;-webkit-transform: rotateX (- 20deg) rotateY (- 20deg);}

Set the animation time to 6s, animation spin, uniform speed linear, infinite loop infinite

For more detailed parameter settings, you can refer to w3C School.I will also write a separate blog about the properties of CSS3 ~

All right, the final effect has been completed.

For the appearance of the original website, there is a slight difference:

Because it adds an extra radial gradient to each face, we add:

Cube *: before {display: block; background:-webkit-radial-gradient (center, ellipse, rgba (0,0,0,0) 30%, rgba (0128,0,0.2) 100%); background: radial-gradient (ellipse at center, rgba (0,0,0,0) 30%, rgba (0,128,0,0.2) 100%); content:'; height: 100% Width: 100%; position: absolute;} this is the end of the article on "how HTML5+CSS3 implements 3D cube rotation animation". I hope the above content can be of some help 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.