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