CSS3的三個(gè)與變形和動(dòng)畫(huà)啊相關(guān)的屬性：

Transform

瀏覽器支持情況：

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

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

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

Opera 只支持 2D 轉(zhuǎn)換。

2D transform變換方法

函數(shù)描述

translate(x,y)	定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動(dòng)元素
rotate(angle)	定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度
scale(x,y)	定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾群透叨?/td>
skew(x-angle,y-angle)	定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸
matrix(n,n,n,n,n,n)	定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣

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

transform-origin 屬性

前面我們提到的transform的方法都是基于元素的中心來(lái)變換的，也就是元素變換的基點(diǎn)默認(rèn)是元素的中心。但是有時(shí)候我們需要在不同的位置對(duì)元素進(jìn)行這些操作，那么我們就可以使用transform-origin來(lái)對(duì)元素進(jìn)行基點(diǎn)位置改變。該屬性可以接收三個(gè)參數(shù)：

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

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

3D transform變換方法

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

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

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

還有以下幾個(gè)轉(zhuǎn)換屬性：

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

?

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

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

?

Transition

W3C標(biāo)準(zhǔn)中對(duì)css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動(dòng)畫(huà)效果改變CSS的屬性值。”

transition屬性的值包括以下四個(gè)：

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

?

?

瀏覽器兼容性

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

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

?

Animation

要使用animation動(dòng)畫(huà)，先要熟悉一下keyframes,Keyframes的語(yǔ)法規(guī)則:命名是由”@keyframes”開(kāi)頭，后面緊接著是這個(gè)“動(dòng)畫(huà)的名稱(chēng)”加上一對(duì)花括號(hào)“{}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則。不同關(guān)鍵幀是通過(guò)from（相當(dāng)于0%）、to（相當(dāng)于100%）或百分比來(lái)表示（為了得到最佳的瀏覽器支持，建議使用百分比），

?

@keyframes定義好了，要使其能發(fā)揮效果，必須通過(guò)animation把它綁定到一個(gè)選擇器，否則動(dòng)畫(huà)不會(huì)有任何效果。下面列出了animation的屬性：

屬性描述取值

animation	所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性，除了 animation-play-state 屬性	?
animation-name	規(guī)定 @keyframes 動(dòng)畫(huà)的名稱(chēng)	?
animation-duration	規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒	默認(rèn)是 0
animation-timing-function	規(guī)定動(dòng)畫(huà)的速度曲線(xiàn)	默認(rèn)是 “ease”
animation-delay	規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始	默認(rèn)是 0
animation-iteration-count	規(guī)定動(dòng)畫(huà)被播放的次數(shù)	默認(rèn)是 1（infinite：無(wú)限次
animation-direction	規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放	默認(rèn)是 “normal”（reverse：反向播放；alternate：奇數(shù)次正向播放，偶數(shù)次反向播放；alternate-reverse：奇數(shù)次反向播放，偶數(shù)次正向播放。）
animation-play-state	規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停	默認(rèn)是 “running”（paused：暫停動(dòng)畫(huà)） ?

?

瀏覽器兼容性

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

Chrome 和 Safari 需要前綴 -webkit-。

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

?

Transform、Transition、Animation 的區(qū)別：

　　Transform：對(duì)元素進(jìn)行變形；
　　Transition：對(duì)元素某個(gè)屬性或多個(gè)屬性的變化，進(jìn)行控制（時(shí)間等），類(lèi)似flash的補(bǔ)間動(dòng)畫(huà)。但只有兩個(gè)關(guān)鍵貞。開(kāi)始，結(jié)束。
　　Animation：對(duì)元素某個(gè)屬性或多個(gè)屬性的變化，進(jìn)行控制（時(shí)間等），類(lèi)似flash的補(bǔ)間動(dòng)畫(huà)。可以設(shè)置多個(gè)關(guān)鍵貞。
?
　　Transition與Animation:
　　transition需要觸發(fā)一個(gè)事件 ,而animation在不需要觸發(fā)任何事件的情況下也可以顯式的隨著時(shí)間變化來(lái)改變?cè)?素css的屬性值，從而達(dá)到一種動(dòng)畫(huà)的效果。

?

以上大部分內(nèi)容來(lái)自：http://blog.csdn.net/u014607184/article/details/51801393 ，感謝作者

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。