初識css3 3d動畫效果

（先看我博客右上角的3d盒子動畫效果，目前沒作兼容處理，最好最新的chrome看）無心間看到網上css3寫的3d動畫效果，實在炫酷，之前理解爲須要js去計算去寫，沒想到css直接能夠實現。因而開始研究，試着本身寫寫。剛開始看教程，實在太懵，主要涉及的3d效果的幾個參數的概念太抽象。網上看不少大神寫的介紹，感受有點懂，又有點不懂，感受仍是不太理解，而後本身仿着他們的代碼寫，

寫完後來回改css代碼的參數看效果，慢慢就理解了。

 

先說下思路，這個很重要。

第一：組裝3d盒子模型。

第二：設置盒子動畫效果。

 

組裝3d盒子模型前 先聊下基本的概念。

說到3d模型，那確定有3個座標系，（2d的話就只有x y 軸了）。3d盒子其實就是在2d的基礎上，旋轉加位移實現3d盒子上圖中x軸正方向也就是你如今看這個網頁屏幕的右邊方向，y軸正方向也就是屏幕下邊方向。z軸正方向也就是屏幕指向你的方向。角度有正反之分。假如你能夠站在 上圖中的某個軸的前面。右轉這個軸（或者叫順時針旋轉）就是正角。反之則是負角度。

 

準備先寫個左右先後都有面的3d盒子，先看demo效果 按照思路來，先組盒子，咱們默認先定義一個3d盒子外盒，

<div>

</div> 

定義好屬性寬高和位置

div{
width: 400px;
height: 233px;
margin: 150px auto;
perspective: 1800px;
border:5px solid #ccc;
}

上面的border是我看div效果加的，實際不用加。perspective是什麼的呢？盒子定義了這個模型，也就是啓用了3d的效果，設置你在寬高頁面中心點z軸正軸方向1800px距離看3d盒子，（不設置的話，沒有立體效果）

而後在這個3d盒子裏面設置後面旋轉和位移實現動畫效果的盒子ul

<div>
<ul>
</ul>
</div>

定義好屬性

ul{
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
}

這裏我圖省事直接寬高100% 也就是撐滿了它的父元素div的寬高（若是比div小也能夠，要美觀得設置ul在div中間就得額外增長margin屬性），而 position是設置了relative 是爲了接下來  ul下的li元素定位用的（我把幾個li元素所有絕對定位到ul上，所有重疊到一塊兒了），transform-style則是實現3d立體旋轉和惟一必需要要的，能夠說是個固定設置。

而後設置4個面

<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

上面說了我是默認把4個li元素絕對定位ul的

ul li{
width: 100%;
height: 100%;
line-height: 233px;
text-align: center;
font-size: 28px;
list-style: none;
position: absolute;
top: 0;
left: 0;
}

上面的都是些基礎的設置。我想小夥伴應該看懂吧？上面默認4個li標籤就是咱們準備要的盒子的先後左右4個面。一開始是所有重疊在一塊兒的。咱們把第一個li做爲後面設置屬性

ul li:nth-child(1){
background-image:url(./img/1.jpg);
background-position:100% 100%;
transform:rotateY(0deg) translateZ(-200px) ;
<!-- display:none -->
}
ul li:nth-child(2){
background-image:url(./img/2.jpg);
background-position:100% 100%;
transform: rotateY(90deg) translateZ(-200px) ;
<!-- display:none -->
}
ul li:nth-child(3){
background-image:url(./img/3.jpg);
background-position:100% 100%;
transform: rotateY(180deg) translateZ(-200px) ;
<!-- display:none -->
}
ul li:nth-child(4){
background-image:url(./img/4.jpg);
background-position:100% 100%;
transform: rotateY(270deg) translateZ(-200px) scale(1,1);
}

這裏我給每一個面都設置了一個鋪滿的背景圖，不用多講。重點這裏 transform，

第一個li  做爲後面  rotateY(0deg) 其實就是啥都沒幹，translateZ(-200px) 就是沿着z軸往負方向位移200px。

第二個li  rotateY(90deg) 此面中心位置沿着y軸順時針旋轉90度，translateZ(-200px) 就是沿着z軸往負方向位移200px。

第三個li  rotateY(180deg) 此面中心位置沿着y軸順時針旋轉90度，translateZ(-200px) 就是沿着z軸往負方向位移200px。

第四個li  rotateY(270deg) 此面中心位置沿着y軸順時針旋轉90度，translateZ(-200px) 就是沿着z軸往負方向位移200px。

注意這裏 先旋轉 和先位移均可以，可是效果不同，

好比你看第二個，旋轉90對，那麼此面z軸的正方向是屏幕的右邊 也就是跟X軸平行了，此時z軸負數位移，其實也就是往左邊移動了200px

而第四個li面 旋轉270度 就是把原來的li的正面z軸旋轉到了左邊。此時z軸負數位移。其實就是往右邊位移了200px。

第3個li旋轉180度，把第三個li軸正方向變成對面了。此時負數位移，其實就是此li朝着咱們屏幕外面方向位移200px。

若是先位移的話怎麼作呢？

第一個li做爲後面，那就是 transform: translateZ(-200px) rotateY(-180deg) ;

第二個li做爲左面，那就是 transform: translateX(-200px) rotateY(--90deg) ;

第三個li做爲正面，那就是 transform: translateZ(200px) rotateY(-0deg) ;

第四個li做爲右面，那就是 transform: translateX(200px) rotateY(90deg) ;

這裏會有點抽象，建議你們手動改下試試。

 

另外，有的同窗會看到還有這個屬性transform-origin，這個其實就是定義你旋轉的時候是以什麼位置來旋轉的（是中心位置旋轉仍是面的某一邊或者其餘位置，

默認就是中心位置）。還有就是你們在調試的時候，有時候前面的面會擋住側面和後邊，致使你看不到效果，能夠把前面的面display none掉，或者設置

perspective-origin來調整你觀看者的角度，這樣能夠看到一些你旋轉90度致使恰好面看不到的面。

 

上面實現了盒子模型的組裝。剩下就是對ul模型進行動畫的定義了，

@keyframes move {
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(-360deg);
}
}

上面就是定義模型 沿着 y軸旋轉一週

而後對ul增長 

animation:move 3s linear 0s infinite normal;

move 動畫名稱 

3s   動畫完成一次總共須要多久

linear 動畫速度勻速

0s  動畫延遲秒數（頁面加載完便可運行）

infinite  動畫的運動次數（無限，或者 具體次數）

normal  規定是否應該輪流反向播放動畫(若是你定義動畫次數大於1次，就存在第一次運行完，動畫是按照第一次順序順序運行完仍是逆序運行)

以上基本算完成了基本的3d盒子動畫效果了

你們對3d盒子模型部分參數還不太理解的，有個網友作了一個很好的示例說明perspective的概念，而後本身多測試下參數或者看看我參考的2個資料地址

http://blog.csdn.net/sinat_27304985/article/details/46862145

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

另外我又寫了2個demo ，加起來總共3個，後面有空再更新玩玩

地址1   地址2   地址3

不是1024地址啊，不要誤會！！！其中第三個旋轉的多邊形我也是參考 上面第二篇博文來作的（三角函數都忘光了）。第三個地址是9邊形，你們能夠腦洞下，若是是 好幾十邊形。而且每一個面是一張圖的平均分割出來的背景圖，再調整perspective是否是就能夠實現相似淘寶造物節（手機微信下看）的那個炫酷的3d效果了。