CSS3 Transform、Transition和Animation屬性總結

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

Transform

#瀏覽器支援情況：

##Internet Explorer 10 、Firefox、Opera 支援transform 屬性。替代的-webkit-transform 屬性（3D 和2D 轉換）。

#函數

描述

#translate(x,y)

定義2D 轉換，沿著X 和Y 軸移動元素scale(x,y)定義2D 縮放轉換，改變元素的寬度和高度定義2D 傾斜轉換，沿著X 和Y 軸定義2D 轉換，使用六個值的矩陣

rotate(angle)定義2D 旋轉，在參數中規定角度

skew(x-angle,y-angle )

#matrix(n,n,n,n,n,n)

#

• 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的屬性值在一定的時間區間內平滑地過渡。 #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規定動畫完成一個週期所花費的秒或毫秒預設是0animation-timing-function規定動畫的速度曲線預設是「ease」animation-delay規定動畫何時開始#預設是0規定動畫被播放的次數預設是1（infinite：無限次規定動畫是否在下一週期逆向地播放預設是「normal」（reverse：反向播放；alternate：奇數次正向播放，偶數次反向播放；alternate -reverse：奇數次反向播放，偶數次正向播放。 ##預設是「running」（paused：暫停動畫）瀏覽器相容性

#屬性	描述
animation-iteration-count
animation-direction

Internet Explorer 10、Firefox 以及Opera 支援@keyframes 規則和animation 屬性。 Internet Explorer 9，以及更早的版本，不支援@keyframe 規則或animation 屬性。 /51801393

以上是CSS3 Transform、Transition和Animation屬性總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！