CSS 變換（Transform）和動畫（Animation）

Transform

咱們在寫網頁的時候是否是大多數時候在操縱二維空間,可是在position絕對定位的時候，咱們遇到了z軸，是否是能夠理解爲開闢了一個新的空間維度呢，但這也只是簡單的層疊，css裏有更強大的屬性：Transform。

從字面上就能看出，Transform 是 "變型 的意思，他的值主要包括

• 旋轉rotate

• 扭曲skew

• 縮放scale

• 移動translate

• 矩陣變形matrix

以rotate爲例，3D Transform 中 rotate 有三種方法，rotateX(angle) X軸旋轉，rotateY(angle) Y軸旋轉，rotateZ(angle) Z軸旋轉。

XYZ表示一個平面以哪一個軸爲座標來旋轉，裏面的值是他的角度。爲了更形象一點，請看這張圖。

從幾何學上來講，面旋轉爲體，這雖然尚未說到3D，可是已經隱約有了3d的概念了。而後就要說到一個很重要的屬性，perspective。

perspective 屬性

依然看字面意思，這個屬性是透視的意思。咱們都知道近大遠小的道理，包括上面咱們的這張旋轉動畫，若是沒有了perspective屬性，那麼你看到的就再也不是一個矩形的旋轉，而是一個矩形逐漸變窄，而後逐漸變寬，由於他沒有透視。

perspective後面的值是一個數字，他有兩種實現方法

• 使用transform屬性，perspective做爲函數值:

  transform: perspective(800);

• 或者直接使用 perspective 屬性:

  perspective: 800;

perspective能夠寫在畫布（父元素）上，也能夠直接寫在元素自己上，對於一張畫布只有一個變型體的時候，幾乎沒有差異。可是當一個畫布上 有多個變型體的時候，兩種寫法的差異當即就表現出來了。就像這張圖，黃色的部分，perspective直接寫在色塊上，紫色的部 分，perspective寫在了父容器上，以畫布做爲透視元素，因此子元素的形態都是不同的。

perspective的值，則是決定3D變形效果的強度的，這個值大體能夠理解爲遠近。值越大，你離物體就越遠。就像一個離你很遠的正方體（好比魔方）在作旋轉，他的視覺效果就比較弱，可是若是這個魔方在你的眼前旋轉，那麼效果就比較強烈。

而這裏咱們會用到一個新的Transform的參數，translateZ。

前面rotateZ已經讓咱們找到了Z軸，translateZ就能夠用來處理Z軸的座標。讓元素在本身的眼前或近或遠。他的值是要參考父元素的perspective值。

好比父元素的perspective值是800，那麼子元素translateZ的值越小，就表示子元素離咱們越遠，看起來也就越小。當子元素的 translateZ接近800可是小於800的時候，好比790+，那麼這個元素會撐滿整個屏幕（注意，會超出瀏覽器），由於這個時候表示這個元素已經 到了你眼前，眼前就是一片小樹葉也是能夠遮擋住後面全部東西的。當子元素超過了800，就表示這個元素已經到了咱們眼睛後面，咱們是看不見本身後腦勺之後 的東西的，元素就會消失不見。

ps:咱們上面那三個平面旋轉的圖，你們能看到在Y或者Y軸的旋轉到90度的時候，圖形消失了，這是由於90度的時候平面與咱們的視線平行，面是沒有厚度的，因此也會消失不見。當夾角變大以後又會從新出現，這個被成爲視覺盲區。

perspective-origin 屬性

簡單的瞭解了透視以後，再來看一個屬性 perspective-origin ，透視原點。

這個屬性就很好理解了，就是透視點的位置，若是你會使用flash，那麼perspective-origin就至關於flash裏面的對齊點，當你作動畫處理的時候，元素會圍繞這個對齊點來旋轉什麼的。CSS3裏默認perspective-origin是元素的中心。

transform-style 屬性

當有了透視，有了變型以後，就該用到transform-style這個屬性了，他有兩個參數，flat與preserve-3d。flat爲默認值，表示平面的；後者preserve-3d表示3D透視。

你們能夠簡單的理解爲這是開啓3D空間的方法：

transform-style: preserve-3d；

僅僅是開關，這個屬性不會對咱們的畫面形成任何影響，除非你用flat。

3D世界裏還有一個原理就是，你沒法穿過一個物體看到他後面的物體，除非這個物體是透明的，這裏咱們就用到一個屬性，backface-visibility，當他的值爲hidden的時候，就是正常的3D世界。

Animation

如今簡單的幾何原理都有了，咱們可讓平面變3D的過程動態的演示出來了，就是css3的 Animation。
在瞭解Animation以前，咱們必須瞭解另外一個特殊的東西，Keyframes。

這裏是圖形圖像裏的一個基礎概念就是關鍵幀，每個關鍵幀表明動畫的一個過程節點，Keyframes具備其本身的語法規則，他的命名是 由」@keyframes」開頭，後面緊接着是這個「動畫的名稱」加上一對花括號「{}」，括號中就是一些不一樣時間段樣式規則，有點像咱們css的樣式寫 法同樣。例如：

@-moz-keyframes name{
     0% {
       -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     25% {
       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     50% {
       -moz-transform:rotateY(180deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     75% {
       -moz-transform:rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
     100% {
       -moz-transform:rotateY(0eg) rotateX(0deg) rotateZ(0deg) translateZ(0px);
     }
  }

這裏，name是動畫的名稱，百分比裏邊只要寫你要實現的動畫就行，能夠寫位移啊，色值變化啊，透明度變化啊等等。

而後咱們再看一下Animation的幾個經常使用屬性：

animation-name:'name';/*動畫屬性名，也就是咱們前面keyframes定義的動畫名*/
animation-duration: 2s;/*動畫持續時間*/
animation-timing-function: linear;
/*
動畫頻率，有勻速，先快後慢    linear：動畫以勻速運動
ease：默認值，開始慢，中間快，結束慢，不對稱
ease-in：開始慢，後面快
ease-out：開始快，後面慢
ease-in-out：開始慢，中間快，結束慢，對稱（注意與ease的區別）
cubic-bezier(n,n,n,n)：可使用cubic-bezier自定義速度，n的取值從0到1
*/
animation-delay: 2s;/*動畫延遲時間*/
animation-iteration-count: 1;/*定義循環資料，infinite爲無限次*/
animation-direction: alternate;/*定義動畫方式， normal 動畫僅正向播放。 alternate 動畫正向播放奇數次迭代，並反向播放偶數次迭代。在反向播放週期中，與 animation-timing-function 關聯的值也會反轉。*/

Animation的簡化版本transition

蒐集資的時候發現還有一個transition過分屬性，聽說他能夠稱爲animation的簡化版本。由於animation屬性比transition屬性多包含keyframes規則顯式控制當前幀的屬性，於是更加靈活。
例如：

.contain{
width: 392px; 
position: relative; 
bottom: -20px; 
opacity: 0;}
.contain.on{ 
bottom: 0; 
opacity: 1;
-webkit-transform:translate(-100px,100px);
 transition:opacity 500ms ease-out 2s,transform 1500ms ease-in-out; 
 -webkit-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;
-moz-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;
-ms-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;
-o-animation:opacity 500ms ease-out 2s,transform 1500ms ease-in-out;  }

當符合某種條件時爲contain添加.on類，便可有當即x移動-100px,y移動100px,歷時1500ms;
延時2s 歷時500ms的「由下往上 由透明變爲實體」的動畫效果。
注意針對性寫，而不是寫all ease-in 500ms;性能過低

語法：
transition: property duration timing-function delay;

可是須要注意的是：火狐瀏覽器對於transition最後一個數值要求很嚴格，若是延時爲0時咱們每每會忽略後面的S，則火狐上無效果！

transition 遇到的特殊問題：.aa完成設定動做以後會恢復原樣，換作 animation 設置forwards屬性依舊會恢復原樣。
解決方案：將.aa{display:inline-block;}或者設置爲display: block;