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,歡迎志同道合的朋友一起多多交流技術。（現在好多技術群基本都聊不了多少真正的技術話題，失望了）