CSS3變形屬性
阿新 • • 發佈：2018-10-06
右上角 rip 比例 web設計 一定的 結合 如果 空間 開發 CSS3變形
CSS2.1中的頁面都是靜態的，網頁設計師也習慣把它作為頁面效果的設計工具。多年來，Web設計師依賴於圖片、Flash或 JavaScript才能完成修改頁面的外觀。 CSS3將改變設計師這種思維，借助CSS3可以輕松傾斜、縮放、移動以及翻轉元素。
2012年9月，W3C組織發布了CSS3變形工作草案。允許CSS把元素轉變為2D或3D空間，這個草案包括了CSS32D變形和CSS33D變形。CSS3變形是一些效果的集合， 比如平移、旋轉、縮放和傾斜效果，每個效果都稱為變形函數（ Transform Function），它們可以操控元素發生旋轉、縮放、平移等變化。 這些效果在之前都需要依賴圖片、Flash或JavaScript才能完成。而使用純CSS來完成這些變形無須加載這些額外的文件，再一次提升了開發效率， 提高了頁面的執行效率。
CSS3變形允許動態的控制元素，可以在屏幕周圍移動它們，縮小或擴大、旋轉，或結合所有這些產生復雜的動畫效果。通過CSS變形，可以讓元素生成靜態視覺效果，也可以很容易結合CSS3的transition和動畫的keyframe產生 一些動畫效果：http:/ /www.iis7.com/b/wzjk/
CSS3變形中具有 X/ Y可用的函數： translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。
1，CSS3 2D變形函數包括： translate()、scale()、rotate()和skew()。translate()函數接受CSS的標準度量單位； scale()函數接受 一個0～1 之間的十進制值； rotate() 和 skew() 兩個函數都接受 一個徑向的度量單位值deg。除了rotate()函數之外，每個函數都接受X軸和Y軸的參數。 2D變形中還有一個矩陣matrix()函數， 包括6個參數。
CSS 變形屬性詳解：
transform屬性指一組轉換函數， transform-origin屬性指定元素的中心點在哪， 新增加了第三個數transform-origin-z， 控制元素三維空間中心點。 transform-style的值設置為preserve- 3d， 建立 一個3D渲染環境。
：CSS3 2D變形
在二維或三維空間，元素可以被扭曲、移位或旋轉。只不過2D變形工作在X軸和Y軸，也就是大家常說的水平軸和垂直軸；而3D變形工作在X軸和Y軸之外， 還有一個Z軸，這些3D變換不僅可以定義元素的長度和寬度，還有深度。首先討論元素在2D平面如何變換，然後在進入3D變換的討論。CSS32D變換讓Web設計師有了更多的自由來裝飾和變形HTML組件，同時有更多的功能裝飾文本和更多的動畫選項來裝飾div元素。2D位移在這裏translate是一種方法，將元素向指定的方向移動， 類似於position中的relative。可以簡單理解為，使用translate()函數可以把元素從原來的位置移動，而不影響在 X、 Y 軸上任何組件。
·tx：代表X軸（ 橫坐標）移動的向量長度， 當其值為正值時， 元素向X軸右方向移動， 反之其值為負值時， 元素向X軸左方向移動。
·ty：代表Y軸（ 縱坐標） 移動的向量長度，當其值為正值時， 元素向Y軸下方向移動， 反之其值為負值時， 元素向Y軸上方向移動。 如果ty沒有顯式設置時， 相當於ty=0。
結合起來， translate()函數移動元素主要有以下三種移動。
-水平移動： 向右移動 translate( tx, 0) 和向左移動 translate(- tx, 0)。
-垂直移動：向上移動 translate( 0,- ty) 和向下移動 translate( 0, ty)。
-對角移動：右下角移動 translate( tx, ty)、右上角移動translate( tx,- ty)、 左上角移動translate(- tx,- ty) 和左下角移動translate(- tx, ty)。
如果要將對象沿著一個方向移動， 如沿著水平軸或者縱軸移動， 可以使用translate( tx, 0) 和translate( 0, ty)來實現。 其實在變形中還為單獨一個方向移動對象提供了更簡單的方法。
·translateX()：水平方向移動一個對象。通過給定一個X軸方向的數值指定對象沿水平軸方向的位移。簡單點說，對象只向X軸進行移動，如果值為正值， 對象向右移動；如果值為負值，對象向左移動。
·translateY()：縱軸方向移動一個對象。通過給定一個Y軸方向的數值指定對象沿縱軸方向的位移。 簡單點說，對象只向Y軸進行移動，如果值為正值，對象向下移動；如果值為負值，對象向上移動。這兩個函數和前面介紹的translate()函數不同的是每個方法只接受一個值。
·transform: translate(- 100px, 0) 實際上 等於 transform: translateX(- 100px)。
·transform: translate( 0,- 100px) 實際上 等於 transform: translateY(- 100px)。
2D縮放
縮放函數scale()讓元素根據中心原點對對象進行縮放， 默認值為 1。因此0. 01到 0. 99之間的任何值，使一個元素縮小；而任何大於或等於 1. 01的值， 讓元素顯得更大。
縮放scale()函數和translate()函數的語法非常相似，可以接受一個值，也可以接受兩個值，只有一個值時，其第二個值默認與第一個值相等。
其取值簡單說明如下：
·sx：指定橫向坐標（ X 軸）方向的縮放向量， 如果值為0. 01 ～ 0. 99之間， 會讓對象在X 軸方向縮小， 如果值大於或等於1. 01， 對象在X 軸方向放大。
·sy：指定縱向坐標（ Y 軸）方向的縮放量， 如果值為 0. 01 ～ 0. 99 之間， 會讓對象在Y軸方向縮小， 如果值大於或等於1. 01， 對象在Y 軸方向放大。
·scaleX()：相當於scale( sx, 1)。表示元素只在X軸（ 水平 方向）縮放元素， 默認值是1。
·scaleY()：相當於scale( 1, sy)。表示元素只在Y軸（ 縱橫 方向）縮放元素， 默認值是1。
2D旋轉
旋轉函數rotate()通過指定的角度參數對元素根據對象原點指定 一個2D旋轉。主要在二維空間內進行操作，接受一個角度值，用來指定旋轉的幅度。 如果這個值為正值，元素相對原點中心順時針 旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。
rotate()函數只接受一個值a，代表旋轉的角度值。其取值可以是正的，也可以是負的。
·取值為正值時，元素默認相對元素中心點順時針旋轉。
·取值為負值時，元素默認相對元素中心點逆時針旋轉。
2D傾斜
傾斜函數skew()能夠讓元素傾斜顯示，可以將一個對象以其中心位置圍繞著X軸和Y軸 按照一定的角度傾斜。與rotate()函數的旋轉不同，rotate()函數只是旋轉， 而不會改變元素的形狀。skew() 函數不會旋轉，而只會改變元素的形狀。
·ax：指定元素水平方向（ X 軸 方向）傾斜的角度。
·ay：指定元素垂直方向（ Y 軸 方向）傾斜的角度。
skew()函數和CSS3變形中的 translate()、scale()函數一樣，除了可以使用 skew( tx, ty)函數讓元素相於元素中心為原點在X軸和Y軸傾斜之外，還可以使用使用 skewX()和skewY()函數讓元素只在 水平或垂直方向傾斜。
·skewX()：相當於skew( ax, 0) 和 skew( ax)。按給定的角度沿X軸指定一個傾斜變形。 skewX()使元素以其中心為基點， 並在水平方向（ X 軸）進行傾斜變形。
·skewY()：相當於skew( 0, ay)。按給定的角度沿Y軸指定一個傾斜變形。 skewY()用來設置元素以其中心為基點並按給定的角度在垂直方向（ Y 軸） 傾斜變形。
在默認情況下，skew()函數都是以元素的原中心點對元素進行傾斜變形，但是同樣可以根據 transform- origin 屬性， 重新設置元素基點對元素進行傾斜變形。另外，skew()函數和制圖軟件中的變形 工具所起作用類似，
2D矩陣
CSS3中Transform讓操作變形變得很簡單，如位移函數translate() 縮放函數scale()、旋轉函數rotate() 和傾斜函數skew()。 這幾個函數很簡單， 也很方便， 但是變形中的矩陣函數matrix()不常用。當然，Web設計師可以使用rotate()、skew()、scale()和translate()函數來滿足它們的變形需要，那為什麽要使用矩陣matrix() 呢？ 在CSS3中的變形函數都可以使用matrix()函數來代替。
：CSS3 3D變形
使用二維變形能夠改變元素在水平和垂直軸線，然而還有一個軸沿著它，可以改變元素。使用三維變形，可以改變元素在Z 軸位置。 三維變換使用基於二維變換的相同屬性，如果熟悉二維變換會發現，3D變形的功能和2D變換的功能類似。CSS3中的3D變換主要包括以下幾種功能函數：
·3D 位移： 包括translateZ()和translate3d()兩個功能函數。
·3D 旋轉： 包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數。
·3D 縮放： 包括scaleZ()和scale3d()兩個功能函數。
·3D 矩陣： 和2D變形一樣，也有一個3D矩陣功能函數matrix3d()。
CSS3中3D 位移
主要包括兩種函數 translateZ() 和 translate3d()。
CSS2.1中的頁面都是靜態的，網頁設計師也習慣把它作為頁面效果的設計工具。多年來，Web設計師依賴於圖片、Flash或 JavaScript才能完成修改頁面的外觀。 CSS3將改變設計師這種思維，借助CSS3可以輕松傾斜、縮放、移動以及翻轉元素。
2012年9月，W3C組織發布了CSS3變形工作草案。允許CSS把元素轉變為2D或3D空間，這個草案包括了CSS32D變形和CSS33D變形。CSS3變形是一些效果的集合， 比如平移、旋轉、縮放和傾斜效果，每個效果都稱為變形函數（ Transform Function），它們可以操控元素發生旋轉、縮放、平移等變化。 這些效果在之前都需要依賴圖片、Flash或JavaScript才能完成。而使用純CSS來完成這些變形無須加載這些額外的文件，再一次提升了開發效率， 提高了頁面的執行效率。
CSS3變形允許動態的控制元素，可以在屏幕周圍移動它們，縮小或擴大、旋轉，或結合所有這些產生復雜的動畫效果。通過CSS變形，可以讓元素生成靜態視覺效果，也可以很容易結合CSS3的transition和動畫的keyframe產生 一些動畫效果：http:/ /www.iis7.com/b/wzjk/
CSS3變形中具有 X/ Y可用的函數： translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。
1，CSS3 2D變形函數包括： translate()、scale()、rotate()和skew()。translate()函數接受CSS的標準度量單位； scale()函數接受 一個0～1 之間的十進制值； rotate() 和 skew() 兩個函數都接受 一個徑向的度量單位值deg。除了rotate()函數之外，每個函數都接受X軸和Y軸的參數。 2D變形中還有一個矩陣matrix()函數， 包括6個參數。
CSS 變形屬性詳解：
transform屬性指一組轉換函數， transform-origin屬性指定元素的中心點在哪， 新增加了第三個數transform-origin-z， 控制元素三維空間中心點。 transform-style的值設置為preserve- 3d， 建立 一個3D渲染環境。
：CSS3 2D變形
在二維或三維空間，元素可以被扭曲、移位或旋轉。只不過2D變形工作在X軸和Y軸，也就是大家常說的水平軸和垂直軸；而3D變形工作在X軸和Y軸之外， 還有一個Z軸，這些3D變換不僅可以定義元素的長度和寬度，還有深度。首先討論元素在2D平面如何變換，然後在進入3D變換的討論。CSS32D變換讓Web設計師有了更多的自由來裝飾和變形HTML組件，同時有更多的功能裝飾文本和更多的動畫選項來裝飾div元素。2D位移在這裏translate是一種方法，將元素向指定的方向移動， 類似於position中的relative。可以簡單理解為，使用translate()函數可以把元素從原來的位置移動，而不影響在 X、 Y 軸上任何組件。
·tx：代表X軸（ 橫坐標）移動的向量長度， 當其值為正值時， 元素向X軸右方向移動， 反之其值為負值時， 元素向X軸左方向移動。
·ty：代表Y軸（ 縱坐標） 移動的向量長度，當其值為正值時， 元素向Y軸下方向移動， 反之其值為負值時， 元素向Y軸上方向移動。 如果ty沒有顯式設置時， 相當於ty=0。
結合起來， translate()函數移動元素主要有以下三種移動。
-水平移動： 向右移動 translate( tx, 0) 和向左移動 translate(- tx, 0)。
-垂直移動：向上移動 translate( 0,- ty) 和向下移動 translate( 0, ty)。
-對角移動：右下角移動 translate( tx, ty)、右上角移動translate( tx,- ty)、 左上角移動translate(- tx,- ty) 和左下角移動translate(- tx, ty)。
如果要將對象沿著一個方向移動， 如沿著水平軸或者縱軸移動， 可以使用translate( tx, 0) 和translate( 0, ty)來實現。 其實在變形中還為單獨一個方向移動對象提供了更簡單的方法。
·translateX()：水平方向移動一個對象。通過給定一個X軸方向的數值指定對象沿水平軸方向的位移。簡單點說，對象只向X軸進行移動，如果值為正值， 對象向右移動；如果值為負值，對象向左移動。
·translateY()：縱軸方向移動一個對象。通過給定一個Y軸方向的數值指定對象沿縱軸方向的位移。 簡單點說，對象只向Y軸進行移動，如果值為正值，對象向下移動；如果值為負值，對象向上移動。這兩個函數和前面介紹的translate()函數不同的是每個方法只接受一個值。
·transform: translate(- 100px, 0) 實際上 等於 transform: translateX(- 100px)。
·transform: translate( 0,- 100px) 實際上 等於 transform: translateY(- 100px)。
2D縮放
縮放函數scale()讓元素根據中心原點對對象進行縮放， 默認值為 1。因此0. 01到 0. 99之間的任何值，使一個元素縮小；而任何大於或等於 1. 01的值， 讓元素顯得更大。
縮放scale()函數和translate()函數的語法非常相似，可以接受一個值，也可以接受兩個值，只有一個值時，其第二個值默認與第一個值相等。
其取值簡單說明如下：
·sx：指定橫向坐標（ X 軸）方向的縮放向量， 如果值為0. 01 ～ 0. 99之間， 會讓對象在X 軸方向縮小， 如果值大於或等於1. 01， 對象在X 軸方向放大。
·sy：指定縱向坐標（ Y 軸）方向的縮放量， 如果值為 0. 01 ～ 0. 99 之間， 會讓對象在Y軸方向縮小， 如果值大於或等於1. 01， 對象在Y 軸方向放大。
·scaleX()：相當於scale( sx, 1)。表示元素只在X軸（ 水平 方向）縮放元素， 默認值是1。
·scaleY()：相當於scale( 1, sy)。表示元素只在Y軸（ 縱橫 方向）縮放元素， 默認值是1。
2D旋轉
旋轉函數rotate()通過指定的角度參數對元素根據對象原點指定 一個2D旋轉。主要在二維空間內進行操作，接受一個角度值，用來指定旋轉的幅度。 如果這個值為正值，元素相對原點中心順時針 旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。
rotate()函數只接受一個值a，代表旋轉的角度值。其取值可以是正的，也可以是負的。
·取值為正值時，元素默認相對元素中心點順時針旋轉。
·取值為負值時，元素默認相對元素中心點逆時針旋轉。
2D傾斜
傾斜函數skew()能夠讓元素傾斜顯示，可以將一個對象以其中心位置圍繞著X軸和Y軸 按照一定的角度傾斜。與rotate()函數的旋轉不同，rotate()函數只是旋轉， 而不會改變元素的形狀。skew() 函數不會旋轉，而只會改變元素的形狀。
·ax：指定元素水平方向（ X 軸 方向）傾斜的角度。
·ay：指定元素垂直方向（ Y 軸 方向）傾斜的角度。
skew()函數和CSS3變形中的 translate()、scale()函數一樣，除了可以使用 skew( tx, ty)函數讓元素相於元素中心為原點在X軸和Y軸傾斜之外，還可以使用使用 skewX()和skewY()函數讓元素只在 水平或垂直方向傾斜。
·skewX()：相當於skew( ax, 0) 和 skew( ax)。按給定的角度沿X軸指定一個傾斜變形。 skewX()使元素以其中心為基點， 並在水平方向（ X 軸）進行傾斜變形。
·skewY()：相當於skew( 0, ay)。按給定的角度沿Y軸指定一個傾斜變形。 skewY()用來設置元素以其中心為基點並按給定的角度在垂直方向（ Y 軸） 傾斜變形。
在默認情況下，skew()函數都是以元素的原中心點對元素進行傾斜變形，但是同樣可以根據 transform- origin 屬性， 重新設置元素基點對元素進行傾斜變形。另外，skew()函數和制圖軟件中的變形 工具所起作用類似，
2D矩陣
CSS3中Transform讓操作變形變得很簡單，如位移函數translate() 縮放函數scale()、旋轉函數rotate() 和傾斜函數skew()。 這幾個函數很簡單， 也很方便， 但是變形中的矩陣函數matrix()不常用。當然，Web設計師可以使用rotate()、skew()、scale()和translate()函數來滿足它們的變形需要，那為什麽要使用矩陣matrix() 呢？ 在CSS3中的變形函數都可以使用matrix()函數來代替。
：CSS3 3D變形
使用二維變形能夠改變元素在水平和垂直軸線，然而還有一個軸沿著它，可以改變元素。使用三維變形，可以改變元素在Z 軸位置。 三維變換使用基於二維變換的相同屬性，如果熟悉二維變換會發現，3D變形的功能和2D變換的功能類似。CSS3中的3D變換主要包括以下幾種功能函數：
·3D 位移： 包括translateZ()和translate3d()兩個功能函數。
·3D 旋轉： 包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數。
·3D 縮放： 包括scaleZ()和scale3d()兩個功能函數。
·3D 矩陣： 和2D變形一樣，也有一個3D矩陣功能函數matrix3d()。
CSS3中3D 位移
主要包括兩種函數 translateZ() 和 translate3d()。
- translate3d()函數的語法translate3d()函數使一個元素在三維空間移動。這種變形的特點是，使用三維向量的坐標定義元素在每個方向移動多少。
translate3d( tx, ty, tz)
其屬性值取值說明如下：
·tx：代表橫向坐標位移向量的長度；
·ty：代表縱向坐標位移向量的長度；
·tz：代表Z軸位移向量的長度。此值不能是一個百分比值，如果取值為百分比值，將會認為無效值。 - translateZ()函數，功能是讓元素在3D空間沿Z軸進行位移，
translate(t)
取值t指的是Z軸的向量位移長度。使用translateZ()函數可以讓元素在Z軸進行位移，當其值為負值時，元素在Z軸越移越遠，導致元素變得較小。反之，當其值為正值時，元素在Z軸越移越近， 導致元素變得較大。
translateZ() 函數在實際使用中等同於translate3d( 0, 0, tz)。僅從視覺效果上看， translateZ() 和 translate3d( 0, 0, tz) 函數功能非常類似於二維空間的 scale() 縮放函數，但實際上完全不同。translateZ()和translate3d(0,0,tz)變形是發生在Z軸上，而不是X軸和Y軸。當使用3D變形，能夠在Z軸上移動一個元素確實有很大的好處， 比如說在創建一個3D立方體的盒子之時。
CSS3中3D 縮放
scaleZ() 和 scale3d() 函數單獨使用時沒有任何效果，需要配合其他的變形函數一起使用才會有效果。
CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數，當scale3d()中X軸和Y軸同時為1，即scale3d( 1, 1, sz)，其效果等同於scaleZ( sz)。 - scaleZ()3D縮放函數，可以讓元素在Z軸上按比例縮放。默認值為1，當值大於1 時，元素放大，小於1大於0. 01時，元素縮小。
scale3d( sx, sy, sz)
sx： 橫向縮放比例
sy： 縱向縮放比例
sz： Z軸縮放比例。
CSS3中 3D 旋轉
在三維變形中，可以讓元素在任何軸旋轉。為此，CSS3新增三個旋轉函數 rotateX()、rotateY() 和rotateZ()。
在 三維空間 裏，使用rotateX()、rotateY() 和rotateZ()函數讓一個元素圍繞X、 Y、 Z 軸旋轉， 其基本語法如下：
rotateX( a)
rotateY( a)
rotateZ( a)
其中a指的是一個旋轉角度值，其值可以是正值也可以是負值。如果值為正值，元素順時針旋轉； 反之，值為負，元素圍繞逆時針旋轉。
rotateZ()函數指定元素圍繞Z軸旋轉，如果僅從視覺角度上看，rotateZ()函數讓元素順時針或逆時針旋轉，並且效果和rotate()效果等同，但不是在2D平面 旋轉。在三維空間裏，除了rotateX()、rotateY()和rotateZ()函數可以讓一個元素在三維空間中旋轉之外，還有一個屬性函數rotate3d()。在3D空間，旋轉有三個 角度來描述一個轉動軸。 軸的旋轉是由一個[ x, y, z] 向量並經過元素原點。 其基本語法如下：
rotate3d( x, y, z, a) rotate3d() 中取值說明。
·x： 0 ～ 1 的數值， 用來描述元素圍繞X軸旋轉的矢量值。
·y： 0 ～ 1 的數值， 用來描述元素圍繞Y軸旋轉的矢量值。
·z： 0 ～ 1 的數值， 用來描述元素圍繞Z軸旋轉的矢量值。
·a： 角度值， 用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉， 反之元素逆時針旋轉。 當 x、y、z 三個值同時為0時， 元素在3D空間 不做任何旋轉。當x、y、z 取不同值時， 和前面介紹的三個旋轉函數功能等同。
·rotateX(a) 函數功能等同於 rotate3d(1, 0, 0, a)。
·rotateY(a) 函數功能等同於 rotate3d(0, 1, 0, a)。
·rotateZ(a) 函數功能等同於 rotate3d(0, 0, 1, a)。
CSS3變形屬性