以下列出了所有的轉換屬性:
property
描述transform
適用於2d或3d轉換的元素
transform-origin
允許您更改轉化元素位置
2d 轉換方法
函式描述
matrix(n,n,n,n,n,n)
定義 2d 轉換，使用六個值的矩陣。
translate(x,y)
定義 2d 轉換，沿著 x 和 y 軸移動元素。
translatex(n)
定義 2d 轉換，沿著 x 軸移動元素。
translatey(n)
定義 2d 轉換，沿著 y 軸移動元素。
scale(x,y)
定義 2d 縮放轉換，改變元素的寬度和高度。
rotate(angle)
定義 2d 旋轉，在引數中規定角度。
skew(x-angle,y-angle)
定義 2d 傾斜轉換，沿著 x 和 y 軸。
3d轉換屬性
下表列出了所有的轉換屬性：
transform
向元素應用 2d 或 3d 轉換。
transform-origin
允許你改變被轉換元素的位置。
transform-style
規定被巢狀元素如何在 3d 空間中顯示。
perspective
規定 3d 元素的透視效果。
perspective-origin
規定 3d 元素的底部位置。
backface-visibility
定義元素在不面對螢幕時是否可見。
3d 轉換方法
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
定義 3d 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z)
定義 3d 轉化。
translatex(x)
定義 3d 轉化，僅使用用於 x 軸的值。
translatey(y)
定義 3d 轉化，僅使用用於 y 軸的值
translatez(z)
定義 3d 轉化，僅使用用於 z 軸的值。
scale3d(x,y,z)
定義 3d 縮放轉換
scalex(x)
定義 3d 縮放轉換，通過給定乙個 x 軸的值。
scaley(y)
定義 3d 縮放轉換，通過給定乙個 y 軸的值。
scalez(z)
定義 3d 縮放轉換，通過給定乙個 z 軸的值。
rotate3d(x,y,z,angle)
定義 3d 旋轉。
rotatex(angle)
定義沿 x 軸的 3d 旋轉。
rotatey(angle)
定義沿 y 軸的 3d 旋轉。
rotatez(angle)
定義沿 z 軸的 3d 旋轉。
perspective(n)
定義 3d 轉換元素的透視檢視。
css3 過渡
過渡屬性
下表列出了所有的過渡屬性:
屬性描述
transition
簡寫屬性，用於在乙個屬性中設定四個過渡屬性。
transition-property
規定應用過渡的 css 屬性的名稱。
transition-duration
定義過渡效果花費的時間。預設是 0。
transition-timing-function
規定過渡效果的時間曲線。預設是 「ease」。
transition-delay
規定過渡效果何時開始。預設是 0。
div
CSS3轉換和動畫
2d轉換 transform屬性 屬性值有 translate 平移，單位px rotate 旋轉，單位deg scale 縮放，給定倍數 skew 翻轉，根據x軸，y軸，單位deg matrix 函式式，自定義 3d轉換 transfrom屬性 屬性值rotatex 單位deg rotatey 單...
筆記 CSS3轉換
1.旋轉 rotate 通過指定的角度引數對原元素指定乙個2d旋轉 語法 transform rotate angle angle 旋轉角度，正數表示順時針旋轉，負數表示逆時針旋轉 2.移動 translate 根據左 x 和頂 y 位置給定的引數，從當前元素位置移動 1 translatex 語法...
css3 轉換 旋轉 過渡 動畫
css3 轉換 旋轉 過渡 動畫 轉換 transform 轉換 translate x,y 位移 translatex 設定水平方向位移 translatey 設定垂直方向位移 旋轉 rotate 旋轉 transform rotate 45deg scale 縮放 transform scale...