CSS3的三個與變形和動畫啊相關的屬性：

Transform

瀏覽器支持情況：

Internet Explorer 10、Firefox、Opera 支持 transform 屬性。

Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用于 2D 轉換）。

Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。

Opera 只支持 2D 轉換。

2D transform變換方法

函數描述

translate(x,y)	定義 2D 轉換，沿著 X 和 Y 軸移動元素
rotate(angle)	定義 2D 旋轉，在參數中規定角度
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿著 X 和 Y 軸
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣

• translate(x, y)方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。x, y的值可以取正負，分別表示表示向不同的方向偏移。
• rotate(angle)方法， 表示旋轉angle角度。angle為正時，按順時針角度旋轉，為負值時，元素逆時針旋轉。
• scale(x, y)方法，表示元素在x軸和y軸上的縮放比例，參數大于1時，元素放大，小于1時，元素縮小。
• skew(x-angle,y-angle)方法，用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，如果沒有設置第二個參數，那么Y軸為0deg
• matrix(n,n,n,n,n,n)方法， 以一個含六值的變換矩陣的形式指定一個2D變換，此屬性值使用涉及到數學中的矩陣

transform-origin 屬性

前面我們提到的transform的方法都是基于元素的中心來變換的，也就是元素變換的基點默認是元素的中心。但是有時候我們需要在不同的位置對元素進行這些操作，那么我們就可以使用transform-origin來對元素進行基點位置改變。該屬性可以接收三個參數：

transform-origin: x-axis y-axis z-axis;

• x-axis，表示水平方向上的取值，可以取 字符參數值left,center right，也可以取百分比，字符參數值對應的百分值為left=0%;center=50%;right=100%。
• y-axis，表示豎直方向上的取值，還可以設置字符值top,center,bottom，也可以取百分比，字符參數值對應的百分值為top=0%;center=50%;bottom=100%。
• z-axis，表示視圖被置于 Z 軸的何處，用于3D變形中。

3D transform變換方法

Internet Explorer 10 和 Firefox 支持 3D 轉換.
Chrome 和 Safari 必須添加前綴 -webkit-.
Opera 還不支持 3D 轉換(支持 2D 轉換 ).

三維變換使用基于二維變換的相同屬性。CSS3中的3D變換主要包括以下幾種功能函數：

• 3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數；
• 3D旋轉：CSS3中的3D旋轉主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數；
• 3D縮放：CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數；
• 3D矩陣：CSS3中3D變形中和2D變形一樣也有一個3D矩陣功能函數matrix3d()。

還有以下幾個轉換屬性：

• • transform-style： 規定被嵌套元素如何在 3D 空間中顯示。
  • perspective： 規定 3D 元素的透視效果。
  • perspective-origin： 規定 3D 元素的底部位置。
  • backface-visibility： 定義元素在不面對屏幕時是否可見。

?

目前各大主流瀏覽器對transform 3d屬性的兼容性還不是特別好，感興趣的讀者可以自行深入了解。下面我們介紹幾個常用的功能方法：

rotateX()方法，圍繞其在一個給定度數X軸旋轉的元素；
rotateY()方法，圍繞其在一個給定度數Y軸旋轉的元素；
rotateZ()方法，圍繞其在一個給定度數Z軸旋轉的元素。

?

Transition

W3C標準中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。”

transition屬性的值包括以下四個：

• • transition-property： 指定對HTML元素的哪個css屬性進行過渡漸變處理，這個屬性可以是color、width、height等各種標準的css屬性。
  • transition-duration：指定屬性過渡的持續時間
  • transition-timing-function：指定漸變的速度：
    1、ease：（逐漸變慢）默認值，ease函數等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；
    2、linear：（勻速），linear 函數等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)；
    3、ease-in：(加速)，ease-in 函數等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)；
    4、ease-out：（減速），ease-out 函數等同于貝塞爾曲線(0, 0, 0.58, 1.0)；
    5、ease-in-out：（加速然后減速），ease-in-out 函數等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)；
    6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。
  • transition-delay：指定延遲時間，也就是經過多長時間才開始執行過渡過程。

?

?

瀏覽器兼容性

Internet Explorer 9 以及更早的版本，不支持 transition 屬性。

Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 屬性。Chrome 25 以及更早的版本以及Safari 需要前綴 -webkit-。

?

Animation

要使用animation動畫，先要熟悉一下keyframes,Keyframes的語法規則:命名是由”@keyframes”開頭，后面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則。不同關鍵幀是通過from（相當于0%）、to（相當于100%）或百分比來表示（為了得到最佳的瀏覽器支持，建議使用百分比），

?

@keyframes定義好了，要使其能發揮效果，必須通過animation把它綁定到一個選擇器，否則動畫不會有任何效果。下面列出了animation的屬性：

屬性描述取值

animation	所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性	?
animation-name	規定 @keyframes 動畫的名稱	?
animation-duration	規定動畫完成一個周期所花費的秒或毫秒	默認是 0
animation-timing-function	規定動畫的速度曲線	默認是 “ease”
animation-delay	規定動畫何時開始	默認是 0
animation-iteration-count	規定動畫被播放的次數	默認是 1（infinite：無限次
animation-direction	規定動畫是否在下一周期逆向地播放	默認是 “normal”（reverse：反向播放；alternate：奇數次正向播放，偶數次反向播放；alternate-reverse：奇數次反向播放，偶數次正向播放。）
animation-play-state	規定動畫是否正在運行或暫停	默認是 “running”（paused：暫停動畫） ?

?

瀏覽器兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 需要前綴 -webkit-。

注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性。

?

Transform、Transition、Animation 的區別：

　　Transform：對元素進行變形；
　　Transition：對元素某個屬性或多個屬性的變化，進行控制（時間等），類似flash的補間動畫。但只有兩個關鍵貞。開始，結束。
　　Animation：對元素某個屬性或多個屬性的變化，進行控制（時間等），類似flash的補間動畫。可以設置多個關鍵貞。
?
　　Transition與Animation:
　　transition需要觸發一個事件 ,而animation在不需要觸發任何事件的情況下也可以顯式的隨著時間變化來改變元 素css的屬性值，從而達到一種動畫的效果。

?

以上大部分內容來自：http://blog.csdn.net/u014607184/article/details/51801393 ，感謝作者

總結

以上是生活随笔為你收集整理的CSS3 Transform、Transition和Animation属性总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。