|
#
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;
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 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 | 規定動畫完成一個週期所花費的秒或毫秒 | 預設是0
| animation-timing-function | 規定動畫的速度曲線 | 預設是「ease」
| animation-delay | 規定動畫何時開始 | #預設是0
|
animation-iteration-count |
| 規定動畫被播放的次數 | 預設是1（infinite：無限次
|
animation-direction |
| 規定動畫是否在下一週期逆向地播放 | 預設是「normal」（reverse：反向播放；alternate：奇數次正向播放，偶數次反向播放；alternate -reverse：奇數次反向播放，偶數次正向播放。 ##預設是「running」（paused：暫停動畫）
| |
|
| 瀏覽器相容性
Internet Explorer 10、Firefox 以及Opera 支援@keyframes 規則和animation 屬性。 Internet Explorer 9，以及更早的版本，不支援@keyframe 規則或animation 屬性。 /51801393
|
