CSS3 Transform變形（3D轉換）

三維變換使用基於二維變換的相同屬性，如果您熟悉二維變換，你們發現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()。

在css3中3d位移主要包括兩種函式translatez()和translate3d()。translate3d()函式使乙個元素在三維空間移動。這種變形的特點是，使用三維向量的座標定義元素在每個方向移動多少。

2.3d旋轉

在三維變形中，我們可以讓元素在任何軸旋轉。為此，css3新增三個旋轉函式：rotatex()、rotatey()和rotatez()。

rotate3d()中取值說明：

x：是乙個0到１之間的數值，主要用來描述元素圍繞x軸旋轉的向量值；

y：是乙個０到１之間的數值，主要用來描述元素圍繞y軸旋轉的向量值；

z：是乙個０到１之間的數值，主要用來描述元素圍繞z軸旋轉的向量值；

a：是乙個角度值，主要用來指定元素在3d空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉。

rotatex(a)函式功能等同於rotate3d(1,0,0,a)

rotatey(a)函式功能等同於rotate3d(0,1,0,a)

rotatez(a)函式功能等同於rotate3d(0,0,1,a)

注：a指的是乙個旋轉角度值。turn是圈，1turn = 360deg；另外還有弧度rad，2πrad = 1turn = 360deg。如，transform:rotate(2turn); //旋轉兩圈

通過使用3d縮放函式，可以讓元素在z軸上按比例縮放。預設值為１，當值大於１時，元素放大，反之小於１大於0.01時，元素縮小。當scale3d()中x軸和y軸同時為1，即scale3d(1,1,sz)，其效果等同於scalez(sz)。

隨著放大倍數的增加，直觀效果上：

x：以方框y軸，左右變寬

y：以方框x軸，上下變高

z：看不出變換。scalez()和scale3d()函式單獨使用時沒有任何效果。

CSS3 transform變形功能

單個測試 原圖 單個測試 rotate 單個測試 原圖 單個測試 scale 總結 scalex scaley 可以這兩個這樣單獨的設定，就可以單獨設定是x軸縮放還是y軸縮放了，或者設定兩個值得時候，其中乙個設為0也可以這種效果 單個測試 原圖 單個測試 translate 總結 如果你全部寫完了，...

CSS3 transform 變形金剛

transform可以對元素進行角度旋轉和縮放,請使用webkit核心最新版瀏覽器瀏覽該文章以保證css3效果能夠完全呈現 有五種變形樣式，可以重疊多種變形樣式，以空格分隔 瀏覽器支援情況 webkit transform,moz transform,o transform,目前對css3動畫支援的...

筆記 CSS3transform屬性

transform屬性有斜拉 skew 縮放 scale 旋轉 rotate 位移 translate 斜拉skew 用法skew 10deg 或者skew 10deg,20deg 兩個引數表示傾斜角度 乙個引數時表示水平方向傾斜 兩個引數時，第乙個表示水平方向傾斜，第二個引數表示垂直方向傾斜 sk...