CSS3變形屬性

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

1. translate3d()函數(shù)的語法translate3d()函數(shù)使一個元素在三維空間移動。這種變形的特點是，使用三維向量的坐標定義元素在每個方向移動多少。
   translate3d( tx, ty, tz)
   其屬性值取值說明如下：
   ·tx：代表橫向坐標位移向量的長度；
   ·ty：代表縱向坐標位移向量的長度；
   ·tz：代表Z軸位移向量的長度。此值不能是一個百分比值，如果取值為百分比值，將會認為無效值。
2. translateZ()函數(shù)，功能是讓元素在3D空間沿Z軸進行位移，
   translate(t)
   取值t指的是Z軸的向量位移長度。使用translateZ()函數(shù)可以讓元素在Z軸進行位移，當其值為負值時，元素在Z軸越移越遠，導致元素變得較小。反之，當其值為正值時，元素在Z軸越移越近， 導致元素變得較大。
   translateZ() 函數(shù)在實際使用中等同于translate3d( 0, 0, tz)。僅從視覺效果上看， translateZ() 和 translate3d( 0, 0, tz) 函數(shù)功能非常類似于二維空間的 scale() 縮放函數(shù)，但實際上完全不同。translateZ()和translate3d(0,0,tz)變形是發(fā)生在Z軸上，而不是X軸和Y軸。當使用3D變形，能夠在Z軸上移動一個元素確實有很大的好處， 比如說在創(chuàng)建一個3D立方體的盒子之時。
   CSS3中3D 縮放
   scaleZ() 和 scale3d() 函數(shù)單獨使用時沒有任何效果，需要配合其他的變形函數(shù)一起使用才會有效果。
   CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數(shù)，當scale3d()中X軸和Y軸同時為1，即scale3d( 1, 1, sz)，其效果等同于scaleZ( sz)。
3. scaleZ()3D縮放函數(shù)，可以讓元素在Z軸上按比例縮放。默認值為1，當值大于1 時，元素放大，小于1大于0. 01時，元素縮小。
   scale3d( sx, sy, sz)
   sx： 橫向縮放比例
   sy： 縱向縮放比例
   sz： Z軸縮放比例。
   CSS3中 3D 旋轉(zhuǎn)
   在三維變形中，可以讓元素在任何軸旋轉(zhuǎn)。為此，CSS3新增三個旋轉(zhuǎn)函數(shù) rotateX()、rotateY() 和rotateZ()。
   在 三維空間 里，使用rotateX()、rotateY() 和rotateZ()函數(shù)讓一個元素圍繞X、 Y、 Z 軸旋轉(zhuǎn)， 其基本語法如下：
   rotateX( a)
   rotateY( a)
   rotateZ( a)
   其中a指的是一個旋轉(zhuǎn)角度值，其值可以是正值也可以是負值。如果值為正值，元素順時針旋轉(zhuǎn)； 反之，值為負，元素圍繞逆時針旋轉(zhuǎn)。
   rotateZ()函數(shù)指定元素圍繞Z軸旋轉(zhuǎn)，如果僅從視覺角度上看，rotateZ()函數(shù)讓元素順時針或逆時針旋轉(zhuǎn)，并且效果和rotate()效果等同，但不是在2D平面 旋轉(zhuǎn)。在三維空間里，除了rotateX()、rotateY()和rotateZ()函數(shù)可以讓一個元素在三維空間中旋轉(zhuǎn)之外，還有一個屬性函數(shù)rotate3d()。在3D空間，旋轉(zhuǎn)有三個 角度來描述一個轉(zhuǎn)動軸。 軸的旋轉(zhuǎn)是由一個[ x, y, z] 向量并經(jīng)過元素原點。 其基本語法如下：
   rotate3d( x, y, z, a) rotate3d() 中取值說明。
   ·x： 0 ～ 1 的數(shù)值， 用來描述元素圍繞X軸旋轉(zhuǎn)的矢量值。
   ·y： 0 ～ 1 的數(shù)值， 用來描述元素圍繞Y軸旋轉(zhuǎn)的矢量值。
   ·z： 0 ～ 1 的數(shù)值， 用來描述元素圍繞Z軸旋轉(zhuǎn)的矢量值。
   ·a： 角度值， 用來指定元素在3D空間旋轉(zhuǎn)的角度，如果其值為正值，元素順時針旋轉(zhuǎn)， 反之元素逆時針旋轉(zhuǎn)。 當 x、y、z 三個值同時為0時， 元素在3D空間 不做任何旋轉(zhuǎn)。當x、y、z 取不同值時， 和前面介紹的三個旋轉(zhuǎn)函數(shù)功能等同。
   ·rotateX(a) 函數(shù)功能等同于 rotate3d(1, 0, 0, a)。
   ·rotateY(a) 函數(shù)功能等同于 rotate3d(0, 1, 0, a)。
   ·rotateZ(a) 函數(shù)功能等同于 rotate3d(0, 0, 1, a)。