【CSS3 transform屬性和過渡屬性詳解】
CSS3transform屬性詳解
transform字面上就是變形，改變的意思。
在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。
2D Transform 方法
- translate() 根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。
- rotate() 在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
- scale() 該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的參數。
-
matrix() 和2D變換方法合並成一個。
matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。 -
skew()包含兩個參數值，分別表示X軸和Y軸傾斜的角度，如果第二個參數為空，則默認為0，參數為負表示向相反方向傾斜。
skewX(<angle>);表示只在X軸(水平方向)傾斜。
skewY(<angle>);表示只在Y軸(垂直方向)傾斜。
下面我們一個個來介紹它們：
一、移動translate
1、translate(x
如：translate : translate(100px,20px);
2、translateX(n) 定義 2D 轉換，沿著 X 軸移動元素。
如：transform:translateX(100px);
3、translateY(n) 定義 2D 轉換，沿著 Y 軸移動元素。
如：transform:translateY(20px);
二、旋轉rotate
rotate(angle) 定義 2D 旋轉，在參數中規定角度。
如：transform:rotate(30deg);
三、縮放scale
註意：默認值是1，它的值放大是比1大，縮小比1小。
1、scale(x,y) 定義 2D 縮放轉換，改變元素的寬度和高度。
如：transform:scale(2,1.5);
2、scaleX(n) 定義 2D 縮放轉換，改變元素的寬度。
如：transform:scaleX(2):
3、scaleY(n) 定義 2D 縮放轉換，改變元素的高度。
如：transform:scaleY(2):
四、扭曲skew
1、skew(x-angle,y-angle) 定義 2D 傾斜轉換，沿著 X 和 Y 軸。
如：transform:skew(30deg,10deg);
2、skewX(angle) 定義 2D 傾斜轉換，沿著 X 軸。
如：transform:skewX(30deg);
3、skewY(angle) 定義 2D 傾斜轉換，沿著 Y 軸。
如：transform:skewY(10deg);
改變元素基點transform-origin
2D 轉換元素能夠改變元素 x 和 y 軸。
| 值 | 描述 |
| x-axis |
定義視圖被置於 X 軸的何處。可能的值：
|
| y-axis |
定義視圖被置於 Y 軸的何處。可能的值：
|
3D 轉換屬性
| 屬性 | 描述 |
| transform | 向元素應用 2D 或 3D 轉換。 |
| transform-origin | 允許你改變被轉換元素的位置。 |
| transform-style | 規定被嵌套元素如何在 3D 空間中顯示。 |
| perspective | 規定 3D 元素的透視效果。 |
| perspective-origin | 規定 3D 元素的底部位置。 |
| backface-visibility | 定義元素在不面對屏幕時是否可見。 |
transform-style: flat|preserve-3d; 表示所有子元素在3D空間中呈現。
如：
perspective: number|none; 設置從何處查看一個元素的角度
如：perspective: 500;
3D Transform 方法
2D變形的坐標軸是平面的，只存在x軸和y軸，而3D變形的坐標軸則是x、y、z三條軸組成的立體空間，x軸正向、y軸正向、z軸正向分別朝向右、下和屏幕外。
（下面是我之前看的一個不錯的例子，借過來分享到這。）
例如，下面一個包含兩個變換函數的transform的效果（gif）：
如果交換這兩個變換函數的順序，是這樣的效果：
可以看到，由於坐標系會隨著每一次變換發生改變，因此不同順序的情況下，元素最終的位置也不同。
CSS3 過渡
| 屬性 | 描述 |
| transition | 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 |
| transition-property | 規定應用過渡的 CSS 屬性的名稱。 |
| transition-duration | 定義過渡效果花費的時間。默認是 0。 |
| transition-timing-function | 規定過渡效果的時間曲線。默認是 "ease"。 |
| transition-delay | 規定過渡效果何時開始。默認是 0。 |
transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：
-
transition-property
-
transition-duration
-
transition-timing-function
-
transition-delay
如：
<!DOCTYPE html> <html> <head> <style> .box{ width:100px; height:100px; background:red; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } .box:hover{ width:300px; } </style> </head> <body> <div class="box"></div> </body> </html>
效果就是這樣的，它在寬度變成300px時會有一個過程，就是過渡。
今天的內容就是這些~~~
【CSS3 transform屬性和過渡屬性詳解】