css3 2D轉換

2D轉換的效果是讓某個元素改變形狀，大小和位置。需要用到transform屬性。

1.translate()方法，根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動。translate(X軸,Y軸) translateX(n) translateY(n)

2.rotate()方法，在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。

3.scale()方法，該元素增加或減少的大小，取決於寬度(X軸)和高度(Y軸)）的引數: scale(原來寬度的幾倍，原來高度的幾倍)。translateX(n) ranslateY(n)

4.skew()方法，skewX(<angle>)表示只在X軸(水平方向)傾斜。skewY(<angle>)表示只在Y軸(垂直方向)傾斜。transform: skew(X軸方向傾斜,Y軸方向傾斜);

5.matrix方法有六個引數，包含旋轉，縮放，移動(平移）和傾斜功能。是及以上方法的總和。

css3過渡

CSS3過渡是元素從一種樣式逐漸改變為另一種的效果。要實現這一點，必須規定兩項內容:指定要新增效果的CSS屬性，指定效果的持續時間。

transition（css屬性，幾秒完成，速度，什麼時候開始），用於在一個屬性中設定四個過渡屬性。

• transition-property指定CSS屬性的name，transition效果 屬性值有： all noneCSS 屬性名稱
• transition-durationtransition效果需要指定多少秒或毫秒才能完成
• transition-timing-function指定transition效果的轉速曲線屬性值

1. linear勻速
2. ease先慢後快
3. ease-in慢速開始
4. ease-out慢速結束
5. ease-in-out慢速開始慢速結束
6. cubic-bezier(n,n,n,n)自定義n是0到1的值

• transition-delay定義transition效果開始的時候

css3 3D轉換

CSS3 3D轉換是在2D轉換的基礎上，新增一個Z軸的屬性。

比如

1. translate3d(x,y,z)、translateZ(z)定義沿著Z軸移動
2. rotate3d(x,y,z,angle)、rotateZ(angle)定義沿 Z 軸的 3D 旋轉。
3. scale3d(x,y,z)、scaleZ(z)定義 3D 縮放轉換，通過給定一個 Z 軸的值。
4. perspective(n)定義 3D 轉換元素的透視檢視單位是px