css3立体旋转动画

 

demo地址

效果图

在别人网站上看到一个立体旋转的例子，然后突然想到自己前几天学习的css3旋转，就试着做了一个例子，看起来有一些粗糙。

html结构很简单：

<div>
    <ul class="ani">
      <li class="r1">1</li>
      <li class="r2">2</li>
      <li class="r3">3</li>
      <li class="r4">4</li>
      <li class="r5">5</li>
      <li class="r6">6</li>    
    </ul>
</div>

核心是一个ul，li列表，其中6个li通过不同的属性设置分别构成立方体的6个面，然后外围ul沿Y轴旋转，当然你也可以任意设置。

关于transform更多讲解，请看transform应用详解   另外还可参考案例css3+js打造炫酷图片展示

注意，在做立体效果时一定注意在父元素添加transform-style: preserve-3d;属性，字面理解 变换形式，3d透视与平面，当设置为flat时，表示在flat平面变换。

下面主要是css属性设置，

*{margin:0px;padding:0px}
body{background-color:#000}
div{-webkit-perspective:800;-webkit-transform-style: preserve-3d;position:absolute;top:30%;left:50%;}
ul{position:absolute;left:0px;top:0px;-webkit-transform:translate(-50%,-50%);width:200px;height:200px; -webkit-transform-style: preserve-3d }
li{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}
.ani{ -webkit-animation: rotaY 5s infinite linear;}
@-webkit-keyframes rotaY{
  from{-webkit-transform:rotateY(0deg) }  
  to{-webkit-transform:rotateY(-360deg) }
}
@-webkit-keyframes rotaX{
  from{-webkit-transform:rotateX(0deg)}    
  to{-webkit-transform:rotateX(-360deg)}
}
@-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) }
.r3{-webkit-transform: rotateY(180deg) translateZ(100px)}
.r4{-webkit-transform: rotateY(-90deg)translateZ(100px) }
.r5{-webkit-transform: rotateX(90deg) translateZ(100px) }
.r6{-webkit-transform:rotateX(-90deg) translateZ(100px) }

有一点就是设置元素的水平垂直居中，absolute,top,left,translate即可方便搞定。

在构建正方体时，我们首先设置各个li元素为绝对定位，在这一步，这6个li元素是相互重合的，第二步设置translateZ与rotateY与rotateX，

可以想象一下，现在旋转中心在整个div的中心，当沿Y轴旋转90度时，这个页面是完全垂直于视平面的，这时候再加translateZ，这样就形成了我们的第一个面，距离中心100px，

其他面都是同样的道理，对于上下两个面则需要采用沿X轴旋转，但是他们距中心的距离是相同的即translateZ，这样分别设置每个元素的旋转方向和变换之后便形成了一个立方体。

如有问题及错误或者更好的解决办法，请联系我。

另自己新建立了一个qq群：85530789,欢迎志同道合的朋友一起多多交流技术。（现在好多技术群基本都聊不了多少真正的技术话题，失望了）