css變換transform和動畫animation

Transform

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

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

• 旋轉rotate

• 扭曲skew

• 縮放scale

• 移動translate

• 矩陣變形matrix

從幾何學上來說，面旋轉為體，這雖然還沒有說到3D，但是已經隱約有了3d的概念了。然后就要說到一個很重要的屬性，perspective。

perspective屬性

依然看字面意思，這個屬性是透視的意思。我們都知道近大遠小的道理，包括上面我們的這張旋轉動畫，如果沒有了perspective屬性，那么你看到的就不再是一個矩形的旋轉，而是一個矩形逐漸變窄，然后逐漸變寬，因為他沒有透視。perspective后面的值是一個數字，他有兩種實現方法，

• 使用transform屬性，perspective作為函數值:

transform: perspective(800);

• 或者直接使用 perspective 屬性:

perspective: 800;

perspective可以寫在畫布（父元素）上，也可以直接寫在元素本身上，對于一張畫布只有一個變型體的時候，幾乎沒有差別。但是當一個畫布上 有多個變型體的時候，兩種寫法的差別立即就表現出來了。就像這張圖，黃色的部分，perspective直接寫在色塊上，紫色的部 分，perspective寫在了父容器上，以畫布作為透視元素，所以子元素的形態都是不一樣的。

perspective的值，則是決定3D變形效果的強度的，這個值大致可以理解為遠近。值越大，你離物體就越遠。就像一個離你很遠的正方體（比如魔方）在做旋轉，他的視覺效果就比較弱，但是如果這個魔方在你的眼前旋轉，那么效果就比較強烈。

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

perspective-origin屬性

簡單的了解了透視之后，再來看一個屬性 perspective-origin ，透視原點。這個屬性就很好理解了，就是透視點的位置，如果你會使用flash，那么perspective-origin就相當于flash里面的對齊點，當你做動畫處理的時候，元素會圍繞這個對齊點來旋轉什么的。CSS3里默認perspective-origin是元素的中心。

transform-style屬性

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;