Pure html+css make 3D cubes and animated effects

Today, is a cube + animation made with CSS3, the effect is as follows.

The whole effect is only the HTML and CSS, not a sentence JS, in fact, the first is to use JS to give six of the small squares to assign value, and then forced to commit a crime, direct manual write it, such a sentence JS are not, more crisp point.

The following is the body of the overall structure, a class called the big box, placed six UL, each UL given a different class name, marked the location of the UL surface, the six UL will be the cube's six faces.

<Divclass= "Big">    <ulclass= "after"></ul>    <ulclass= "Left"></ul>    <ulclass= "Right"></ul>    <ulclass= "Top"></ul>    <ulclass= "Bottom"></ul>    <ulclass= "Before"></ul></Div>

The following is the CSS style of the large box big, and the style of the CSS animation he wants to invoke.

. Big{position:relative;width:300px;Height:300px;margin:150px Auto 0;Transform-style:preserve-3d;Animation:Animate 6s Infinite;}@keyframes Animate{0% {Transform:Translate ( -400px) Rotatex (0deg) Rotatey (0deg) Rotatez (0deg); }50%{Transform:Translate (400px) Rotatex (0deg) Rotatey (360deg) Rotatez (360deg); }100%{Transform:Translate ( -400px) Rotatex (0deg) Rotatey (0deg) Rotatez (0deg); }}

The following is a unified style of six UL and Li, including size, positioning, some styles of text, and so on.

. Big ul{width:300px;Height:300px;position:Absolute;font-size:200px;text-align:Center;Line-height:300px;Color:#fff;}. Big Li{float: Left;width:80px;Height:80px;Border-radius:30%;margin:10px;List-style:None;font-size:50px;text-align:Center;Line-height:80px;}

Below for each UL through the Transfrom property, set to a different location, as well as the internal Li background color settings, here only write the left class, the other five faces similar.

{    transform: rotatey ( -90deg) Translatez (150px);}  {    background-color: #a9f;     Opacity: 0.9;}

The whole effect is written out, or relatively simple, as long as the meaning of the command, the rest is to organize the logic, perhaps for some people, six faces is a difficult position, and the other part of the people, the animation is difficult to write, and some people ... Can't make up, feel really no difficulty, so also can not speculate other people think the difficulty is where

The feeling, or the front of the bouncing ball is more trouble points.

Pure html+css make 3D cubes and animated effects