CSS3 Stereo Rotation animation

Demo Address

On someone else's website to see an example of a stereo rotation, and then suddenly think of their first few days to learn the CSS3 rotation, try to do an example, looks a bit rough.

The HTML structure is simple:

<div> <ulclass="ANI"> <liclass="R1">1</li> <liclass="R2">2</li> <liclass="R3">3</li> <liclass="R4">4</li> <liclass="R5">5</li> <liclass="R6">6</li> </ul></div>

The core is a list of Ul,li, where 6 Li makes 6 faces of the cube by different property settings, and then the perimeter ul rotates along the y axis, and of course you can set it arbitrarily.

More about transform, please see Transform application details can also refer to the case Css3+js to create cool Picture Show

Note that when you do a stereoscopic effect, you must pay attention to adding transform-style:preserve-3d in the parent element, the attribute, the literal understanding transformation form, the 3d perspective and the plane, when set to flat, the flat plane transformation.

The following are mainly CSS property settings,

1*{margin:0px;padding:0px}2body{background-color:# the}3Div{-webkit-perspective: -;-webkit-transform-style:preserve-3d;position:absolute;top: -%;left: -%;}4Ul{position:absolute;left:0px;top:0px;-webkit-transform:translate (- -%,- -%); width:200px;height:200px; -webkit-transform-style:preserve-3d}5li{list-style-type:none;position:absolute;top:0px;left:0px;right:0px;bottom:0px;width:200px;height:200px; Font-size:100px;text-align:center;line-height:200px;opacity:0.3;-webkit-transition:-webkit-transform 2s, opacity 2s;border:2px solid #C09; box-shadow:1px 1px 10px #C09; -webkit-backface-visibility:visible;color: #fff}6. ani{-webkit-Animation:rotay 5s infinite Linear;}7@-webkit-keyframes rotay{8    from{-webkit-Transform:rotatey (0deg)}9To{-webkit-transform:rotatey (-360deg)}Ten } One@-webkit-keyframes rotax{ A    from{-webkit-Transform:rotatex (0deg)} -To{-webkit-transform:rotatex (-360deg)} - } the@-webkit-keyframes rotaz{ -    from{-webkit-Transform:rotatez (0deg)} -To{-webkit-transform:rotatez (-360deg)} - } +  -. r1{-webkit-Transform:translatez (100px)} +. r2{-webkit-Transform:rotatey (90deg) Translatez (100px)} A. r3{-webkit-Transform:rotatey (180deg) Translatez (100px)} at. R4{-webkit-transform:rotatey (-90deg) Translatez (100px)} -. r5{-webkit-Transform:rotatex (90deg) Translatez (100px)} -. R6{-webkit-transform:rotatex ( -90deg) Translatez (100px)}

One thing is to set the element's horizontal vertical center, absolute,top,left,translate can be easily done.

In building the cube, we first set the individual Li elements as absolute positioning, in this step, the 6 Li elements are coincident, the second step set Translatez and Rotatey and Rotatex,

As you can imagine, the center of rotation is now in the center of the entire div, when rotated 90 degrees along the Y axis, this page is completely perpendicular to the view plane, this time add translatez, thus forming our first face, 100px from the center,

The other faces are the same, for the top and bottom two faces need to be rotated along the x axis, but their distance from the center is the same as Translatez, so that each element's rotation direction and transformation after the formation of a cube.

If you have any questions or errors or better solutions, please contact me.

Another own new set up a QQ group: 85530789, Welcome to like-minded friends with a lot of communication technology. (now a lot of technical groups are basically not able to talk about how many real technical topics, disappointed)

CSS3 Stereo Rotation animation