第1頁第15章變形處理本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁第15章變形處理本章概述第2頁本章概述在CSS3中，可以使用transform功能實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜和移動(dòng)4種類型的變形處理。在變形處理中，會(huì)使用到deg這個(gè)單位，這是一種角度單位。旋轉(zhuǎn)操作通過使用rotate方法來實(shí)現(xiàn)。縮放操作通過使用scale方法來實(shí)現(xiàn)。傾斜操作通過使用skew方法來實(shí)現(xiàn)。移動(dòng)操作通過使用translate方法來實(shí)現(xiàn)。在使用transform功能實(shí)現(xiàn)變形操作時(shí)，可以指定變形的基準(zhǔn)點(diǎn)。本章主要來介紹這些內(nèi)容。第2頁本章概述在CSS3中，可以使用transform功能實(shí)第3頁本章的學(xué)習(xí)目標(biāo)掌握CSS3中transform功能的使用方法，能夠使用transform功能來實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜和移動(dòng)的變形效果。能夠?qū)⑿D(zhuǎn)、縮放、傾斜和移動(dòng)這4種變形效果結(jié)合使用，并知道使用的先后順序不同，頁面顯示結(jié)果會(huì)有什么樣的區(qū)別。掌握3D變形功能的概念和實(shí)現(xiàn)方法。掌握變形矩陣的基本概念和使用方法。第3頁本章的學(xué)習(xí)目標(biāo)掌握CSS3中transform功能的使第4頁主要內(nèi)容15.1認(rèn)識(shí)transform15.22D變形15.33D變形15.4變形矩陣15.5本章小結(jié)第4頁主要內(nèi)容15.1認(rèn)識(shí)transform第5頁15.1認(rèn)識(shí)transform在CSS3中，使用transform屬性來實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這4種類型的變形處理。第5頁15.1認(rèn)識(shí)transform在CSS3中，使用t第6頁主要內(nèi)容15.1認(rèn)識(shí)transform15.22D變形15.33D變形15.4變形矩陣15.5本章小結(jié)第6頁主要內(nèi)容15.1認(rèn)識(shí)transform第7頁15.22D變形15.2.1旋轉(zhuǎn)15.2.2縮放15.2.3移動(dòng)15.2.4扭曲15.2.5復(fù)雜變形第7頁15.22D變形15.2.1旋轉(zhuǎn)第8頁15.2.1旋轉(zhuǎn)旋轉(zhuǎn)通過rotate方法實(shí)現(xiàn)，使用格式如下：rotate(<angle>);通過指定的角度參數(shù)對(duì)原元素指定一個(gè)2Drotation（2D旋轉(zhuǎn)），需先有transform-origin屬性的定義。transform-origin定義的是旋轉(zhuǎn)的基點(diǎn)，其中angle是指旋轉(zhuǎn)角度，如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)，如果設(shè)置的值為負(fù)數(shù)，則表示逆時(shí)針旋轉(zhuǎn)。如：transform:rotate(30deg);。第8頁15.2.1旋轉(zhuǎn)旋轉(zhuǎn)通過rotate方法實(shí)現(xiàn)，使用第9頁15.2.2縮放縮放scale具有3種情況：scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點(diǎn)和基數(shù)，其中心點(diǎn)就是元素的中心位置，縮放基數(shù)為1，如果其值大于1元素就放大，反之其值小于1，元素縮小。下面具體來看看這3種情況具體使用方法：transform:scale(2,1.5);//水平方向放大2倍，垂直方向放大1.5倍transform:scaleX(2);//水平方向放大2倍transform:scaleY(2);//垂直方向放大2倍第9頁15.2.2縮放縮放scale具有3種情況：sca第10頁15.2.3移動(dòng)文字或圖像的移動(dòng)通過translate方法實(shí)現(xiàn)，和縮放類似，也分為3種情況：translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）；translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）；translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)），具體使用方法如下：transform:translate(100px,20px);//水平方向移動(dòng)100像素，垂直方向移動(dòng)20像素transform:translateX(100px);//水平方向移動(dòng)100像素transform:translateY(20px);//垂直方向移動(dòng)20像素第10頁15.2.3移動(dòng)文字或圖像的移動(dòng)通過transl第11頁15.2.4扭曲扭曲，有時(shí)候也稱為傾斜操作，通過skew方法實(shí)現(xiàn)。和translate、scale一樣，skew方法也具有3種情況：skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形），具體使用語法格式如下：transform:skew(30deg,10deg);//水平和垂直方向各扭曲30度、10度transform:skewX(30deg);//水平方向扭曲30度transform:skewY(10deg);//垂直方向扭曲10度第11頁15.2.4扭曲扭曲，有時(shí)候也稱為傾斜操作，通過第12頁15.2.5復(fù)雜變形上一節(jié)介紹了使用transform對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)和扭曲的操作，本節(jié)介紹如何綜合使用這幾種方法來對(duì)一個(gè)元素使用多重變形。本節(jié)主要通過以下兩個(gè)示例來講解多重變形操作：【例15-5】是一個(gè)對(duì)元素先移動(dòng)，然后旋轉(zhuǎn)，最后縮放的示例；【例15-6】是一個(gè)對(duì)元素先旋轉(zhuǎn)，然后縮放，最后移動(dòng)的示例。第12頁15.2.5復(fù)雜變形上一節(jié)介紹了使用transf第13頁主要內(nèi)容15.1認(rèn)識(shí)transform15.22D變形15.33D變形15.4變形矩陣15.5本章小結(jié)第13頁主要內(nèi)容15.1認(rèn)識(shí)transform第14頁15.33D變形15.3.13D位移15.3.23D旋轉(zhuǎn)15.3.33D縮放15.3.43D變形兼容性15.3.6多重變形第14頁15.33D變形15.3.13D位移第15頁15.3.13D位移在CSS3中，3D位移操作主要通過translateZ()和translate3d()兩個(gè)函數(shù)實(shí)現(xiàn)。其中，translate3d()函數(shù)使一個(gè)元素在三維空間移動(dòng)。其基本語法如下：translate3d(tx,ty,tz);其中，各參數(shù)取值說明如下：tx：代表橫向坐標(biāo)位移向量的長(zhǎng)度；ty：代表縱向坐標(biāo)位移向量的長(zhǎng)度；tz：代表Z軸位移向量的長(zhǎng)度。該值不能是一個(gè)百分比值，如果取值為百分比值，將被認(rèn)為是無效值。第15頁15.3.13D位移在CSS3中，3D位移操作主第16頁15.3.23D旋轉(zhuǎn)在三維變形中，可以讓元素在任何軸上旋轉(zhuǎn)。CSS3新增3個(gè)旋轉(zhuǎn)函數(shù)：rotateX()、rotateY()和rotateZ()。rotateX()函數(shù)允許一個(gè)元素圍繞X軸旋轉(zhuǎn)；rotateY()函數(shù)允許一個(gè)元素圍繞Y軸旋轉(zhuǎn)；rotateZ()函數(shù)允許一個(gè)元素圍繞Z軸旋轉(zhuǎn)。rotateX(a)rotateY(a)rotateZ(a)第16頁15.3.23D旋轉(zhuǎn)在三維變形中，可以讓元素在任第17頁15.3.33D縮放CSS3中，3D縮放處理主要通過scaleZ()和scale3d()兩個(gè)函數(shù)來實(shí)現(xiàn)。當(dāng)scale3d()中X軸和Y軸同時(shí)為1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通過使用3D縮放函數(shù)，可以讓元素在Z軸上按比例縮放。默認(rèn)值為１，當(dāng)值大于１時(shí)，元素放大，反之小于１且大于0.01時(shí)，元素縮小。scale3d()函數(shù)的使用語法如下：scale3d(sx,sy,sz)其中，各參數(shù)作用如下。sx：橫向縮放比例；sy：縱向縮放比例；sz：Z軸縮放比例；第17頁15.3.33D縮放CSS3中，3D縮放處理主要第18頁15.3.43D變形兼容性3D變形在實(shí)際使用這時(shí)同樣需要添加各瀏覽器的私有屬性，并且有個(gè)別屬性在某些主流瀏覽器中并未得到很好的支持：IE10+中3D變形部分屬性未得到很好的支持；Firefox10.0至Firefox15.0版本的瀏覽器，在使用3D變形時(shí)需要添加私有屬性-moz-，但從Firefox16.0+版本開始無需添加瀏覽器私有屬性；Chrome12.0+版本中使用3D變形時(shí)需要添加私有屬性-webkit-；Safari4.0+版本中使用3D變形時(shí)需要添加私有屬性-webkit-；Opera15.0+版本才開始支持3D變形，使用之里需要添加私有屬性-webkit-；移動(dòng)設(shè)備中iOSSafari3.2+、AndroidBrowser3.0+、BlackberryBrowser7.0+、OperaMobile14.0+、ChromeforAndroid25.0+都支持3D變形，但在使用時(shí)需要添加私有屬性-webkit-；FirefoxforAndroid19.0+支持3D變形，但無需添加瀏覽器私有屬性。第18頁15.3.43D變形兼容性3D變形在實(shí)際使用這時(shí)第19頁15.3.6多重變形在CSS3中，不管是2D變形還是3D變形，都可以使用多重變形，它們之間使用空格分隔，具體語法如下：transform:<transform-function><transform-function>其中，transfrom-function是指CSS3中的任何變形函數(shù)。第19頁15.3.6多重變形在CSS3中，不管是2D變形第20頁主要內(nèi)容15.1認(rèn)識(shí)transform15.22D變形15.33D變形15.4變形矩陣15.5本章小結(jié)第20頁主要內(nèi)容15.1認(rèn)識(shí)transform第21頁15.4變形矩陣15.4.1矩陣概述15.4.2變形與坐標(biāo)系統(tǒng)15.4.32D矩陣變形15.4.43D矩陣變形15.4.5使用矩陣實(shí)現(xiàn)多重變形第21頁15.4變形矩陣15.4.1矩陣概述第22頁15.4.1矩陣概述矩陣是一個(gè)數(shù)學(xué)概念，代表一組數(shù)字、符號(hào)或表達(dá)式的矩形陣列。在圖形圖像學(xué)中，矩陣被用在2D屏幕上進(jìn)行3D圖像的線性變換中。實(shí)際上，這種變換處理通過矩陣函數(shù)完成，matrix()函數(shù)允許創(chuàng)建線性變換，matrix3d()函數(shù)允許使用CSS代碼將三維投射到二維坐標(biāo)中。變形處理就是將坐標(biāo)系統(tǒng)中一個(gè)坐標(biāo)點(diǎn)位置乘以一個(gè)變形矩陣即可。第22頁15.4.1矩陣概述矩陣是一個(gè)數(shù)學(xué)概念，代表一組第23頁15.4.2變形與坐標(biāo)系統(tǒng)Web中，每一個(gè)頁面都是一個(gè)坐標(biāo)系統(tǒng)，原點(diǎn)在頁面的左上角(0,0)，其中，X軸方向?yàn)閺淖蟮接遥琘軸方向從上到下，Z軸則是頁面觀察者與頁面之間的距離。Z坐標(biāo)值越大代表觀察者離頁面的距離越近，反之越遠(yuǎn)。當(dāng)對(duì)一個(gè)對(duì)象做變形處理時(shí)，首先建立本地坐標(biāo)系統(tǒng)。默認(rèn)情況下，本地坐標(biāo)系統(tǒng)中的原點(diǎn)在對(duì)象正中央?？梢酝ㄟ^在樣式代碼中使用transform-origin屬性來調(diào)整坐標(biāo)原點(diǎn)。在本地坐標(biāo)系統(tǒng)中對(duì)任何坐標(biāo)點(diǎn)進(jìn)行的變形都是參考坐標(biāo)原點(diǎn)進(jìn)行的。第23頁15.4.2變形與坐標(biāo)系統(tǒng)Web中，每一個(gè)頁面都第24頁15.4.32D矩陣變形瀏覽器會(huì)自動(dòng)將二維變形矩陣與一個(gè)數(shù)組[x,y,1]相乘，其中x值和y值分別為一個(gè)坐標(biāo)點(diǎn)在X軸方向上的位置與Y軸方向上的位置。為了計(jì)算經(jīng)過變形處理后的坐標(biāo)點(diǎn)位置，將該數(shù)組和2D變形矩陣相乘，如圖1所示。每一種變形處理都有特定的2D變形矩陣。例如，一個(gè)平移用2D變形矩陣如圖2所示。其中，tx和ty代表坐標(biāo)原點(diǎn)被平移后新的坐標(biāo)點(diǎn)位置。可以使用數(shù)組[1001txty]來代替它，這個(gè)數(shù)組將被用于matrix函數(shù)中，代碼如下：#mydiv{transform:matrix(1,0,0,1,tx,ty);}第24頁15.4.32D矩陣變形瀏覽器會(huì)自動(dòng)將二維變形矩第25頁15.4.43D矩陣變形下面是一個(gè)處理3D縮放變形時(shí)所用的4×4矩陣。其中，sx、sy和sz代表X、Y、Z軸方向上的縮放倍數(shù)。如果使用matrix3d函數(shù)，代碼為：transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)。第25頁15.4.43D矩陣變形下面是一個(gè)處理3D縮放變第26頁15.4.5使用矩陣實(shí)現(xiàn)多重變形旋轉(zhuǎn)變形使用矩陣為[cos(a)sin(a)-sin(a)cos(a)]，a代表一個(gè)角度。為了放大元素，這里使用矩陣[sx00sy00]。為了使用多種變形，首先將這兩個(gè)矩陣相乘：第26頁15.4.5使用矩陣實(shí)現(xiàn)多重變形旋轉(zhuǎn)變形使用矩陣第27頁15.4.5使用矩陣實(shí)現(xiàn)多重變形將【例15-12】中的div元素的tranform樣式屬性值改為：transform:matrix(1.0606,1.0606,-1.0606,1.0606,0,1);如果對(duì)一個(gè)(298,110)坐標(biāo)點(diǎn)使用經(jīng)過計(jì)算后的變形矩陣，新的坐標(biāo)點(diǎn)為(199,393,432.725)，計(jì)算過程如圖所示。第27頁15.4.5使用矩陣實(shí)現(xiàn)多重變形將【例15-12第28頁主要內(nèi)容15.1認(rèn)識(shí)transform15.22D變形15.33D變形15.4變形矩陣15.5本章小結(jié)第28頁主要內(nèi)容15.1認(rèn)識(shí)transform第29頁15.5本章小結(jié)在這章中，主要分兩個(gè)部分介紹了CSS3中的變形屬性，第一部分是二維空間的變形，第二部分是三維空間的變形。二維空間中的變形主要向大家介紹了旋轉(zhuǎn)rotate()、傾斜skew()、位移translate()、縮放scale()和2D矩陣等函數(shù)功能。三維空間的變形主要向大家介紹了3D空間的幾個(gè)重要概念，比如perspective、perspective-origin和backface-visibility等，以及詳細(xì)介紹了3D空間中的3D旋轉(zhuǎn)、3D位移、3D縮放和3D矩陣。通過本章節(jié)的學(xué)習(xí)，大家對(duì)CSS3的變形會(huì)有一個(gè)較深的了解。第29頁15.5本章小結(jié)在這章中，主要分兩個(gè)部分介紹了第30頁第15章變形處理本章概述本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第1頁第15章變形處理本章概述第31頁本章概述在CSS3中，可以使用transform功能實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜和移動(dòng)4種類型的變形處理。在變形處理中，會(huì)使用到deg這個(gè)單位，這是一種角度單位。旋轉(zhuǎn)操作通過使用rotate方法來實(shí)現(xiàn)。縮放操作通過使用scale方法來實(shí)現(xiàn)。傾斜操作通過使用skew方法來實(shí)現(xiàn)。移動(dòng)操作通過使用translate方法來實(shí)現(xiàn)。在使用transform功能實(shí)現(xiàn)變形操作時(shí)，可以指定變形的基準(zhǔn)點(diǎn)。本章主要來介紹這些內(nèi)容。第2頁本章概述在CSS3中，可以使用transform功能實(shí)第32頁本章的學(xué)習(xí)目標(biāo)掌握CSS3中transform功能的使用方法，能夠使用transform功能來實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜和移動(dòng)的變形效果。能夠?qū)⑿D(zhuǎn)、縮放、傾斜和移動(dòng)這4種變形效果結(jié)合使用，并知道使用的先后順序不同，頁面顯示結(jié)果會(huì)有什么樣的區(qū)別。掌握3D變形功能的概念和實(shí)現(xiàn)方法。掌握變形矩陣的基本概念和使用方法。第3頁本章的學(xué)習(xí)目標(biāo)掌握CSS3中transform功能的使第33頁主要內(nèi)容15.1認(rèn)識(shí)transform15.22D變形15.33D變形15.4變形矩陣15.5本章小結(jié)第4頁主要內(nèi)容15.1認(rèn)識(shí)transform第34頁15.1認(rèn)識(shí)transform在CSS3中，使用transform屬性來實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這4種類型的變形處理。第5頁15.1認(rèn)識(shí)transform在CSS3中，使用t第35頁主要內(nèi)容15.1認(rèn)識(shí)transform15.22D變形15.33D變形15.4變形矩陣15.5本章小結(jié)第6頁主要內(nèi)容15.1認(rèn)識(shí)transform第36頁15.22D變形15.2.1旋轉(zhuǎn)15.2.2縮放15.2.3移動(dòng)15.2.4扭曲15.2.5復(fù)雜變形第7頁15.22D變形15.2.1旋轉(zhuǎn)第37頁15.2.1旋轉(zhuǎn)旋轉(zhuǎn)通過rotate方法實(shí)現(xiàn)，使用格式如下：rotate(<angle>);通過指定的角度參數(shù)對(duì)原元素指定一個(gè)2Drotation（2D旋轉(zhuǎn)），需先有transform-origin屬性的定義。transform-origin定義的是旋轉(zhuǎn)的基點(diǎn)，其中angle是指旋轉(zhuǎn)角度，如果設(shè)置的值為正數(shù)表示順時(shí)針旋轉(zhuǎn)，如果設(shè)置的值為負(fù)數(shù)，則表示逆時(shí)針旋轉(zhuǎn)。如：transform:rotate(30deg);。第8頁15.2.1旋轉(zhuǎn)旋轉(zhuǎn)通過rotate方法實(shí)現(xiàn)，使用第38頁15.2.2縮放縮放scale具有3種情況：scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點(diǎn)和基數(shù)，其中心點(diǎn)就是元素的中心位置，縮放基數(shù)為1，如果其值大于1元素就放大，反之其值小于1，元素縮小。下面具體來看看這3種情況具體使用方法：transform:scale(2,1.5);//水平方向放大2倍，垂直方向放大1.5倍transform:scaleX(2);//水平方向放大2倍transform:scaleY(2);//垂直方向放大2倍第9頁15.2.2縮放縮放scale具有3種情況：sca第39頁15.2.3移動(dòng)文字或圖像的移動(dòng)通過translate方法實(shí)現(xiàn)，和縮放類似，也分為3種情況：translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是X軸和Y軸同時(shí)移動(dòng)）；translateX(x)僅水平方向移動(dòng)（X軸移動(dòng)）；translateY(Y)僅垂直方向移動(dòng)（Y軸移動(dòng)），具體使用方法如下：transform:translate(100px,20px);//水平方向移動(dòng)100像素，垂直方向移動(dòng)20像素transform:translateX(100px);//水平方向移動(dòng)100像素transform:translateY(20px);//垂直方向移動(dòng)20像素第10頁15.2.3移動(dòng)文字或圖像的移動(dòng)通過transl第40頁15.2.4扭曲扭曲，有時(shí)候也稱為傾斜操作，通過skew方法實(shí)現(xiàn)。和translate、scale一樣，skew方法也具有3種情況：skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（X軸和Y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形），具體使用語法格式如下：transform:skew(30deg,10deg);//水平和垂直方向各扭曲30度、10度transform:skewX(30deg);//水平方向扭曲30度transform:skewY(10deg);//垂直方向扭曲10度第11頁15.2.4扭曲扭曲，有時(shí)候也稱為傾斜操作，通過第41頁15.2.5復(fù)雜變形上一節(jié)介紹了使用transform對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)和扭曲的操作，本節(jié)介紹如何綜合使用這幾種方法來對(duì)一個(gè)元素使用多重變形。本節(jié)主要通過以下兩個(gè)示例來講解多重變形操作：【例15-5】是一個(gè)對(duì)元素先移動(dòng)，然后旋轉(zhuǎn)，最后縮放的示例；【例15-6】是一個(gè)對(duì)元素先旋轉(zhuǎn)，然后縮放，最后移動(dòng)的示例。第12頁15.2.5復(fù)雜變形上一節(jié)介紹了使用transf第42頁主要內(nèi)容15.1認(rèn)識(shí)transform15.22D變形15.33D變形15.4變形矩陣15.5本章小結(jié)第13頁主要內(nèi)容15.1認(rèn)識(shí)transform第43頁15.33D變形15.3.13D位移15.3.23D旋轉(zhuǎn)15.3.33D縮放15.3.43D變形兼容性15.3.6多重變形第14頁15.33D變形15.3.13D位移第44頁15.3.13D位移在CSS3中，3D位移操作主要通過translateZ()和translate3d()兩個(gè)函數(shù)實(shí)現(xiàn)。其中，translate3d()函數(shù)使一個(gè)元素在三維空間移動(dòng)。其基本語法如下：translate3d(tx,ty,tz);其中，各參數(shù)取值說明如下：tx：代表橫向坐標(biāo)位移向量的長(zhǎng)度；ty：代表縱向坐標(biāo)位移向量的長(zhǎng)度；tz：代表Z軸位移向量的長(zhǎng)度。該值不能是一個(gè)百分比值，如果取值為百分比值，將被認(rèn)為是無效值。第15頁15.3.13D位移在CSS3中，3D位移操作主第45頁15.3.23D旋轉(zhuǎn)在三維變形中，可以讓元素在任何軸上旋轉(zhuǎn)。CSS3新增3個(gè)旋轉(zhuǎn)函數(shù)：rotateX()、rotateY()和rotateZ()。rotateX()函數(shù)允許一個(gè)元素圍繞X軸旋轉(zhuǎn)；rotateY()函數(shù)允許一個(gè)元素圍繞Y軸旋轉(zhuǎn)；rotateZ()函數(shù)允許一個(gè)元素圍繞Z軸旋轉(zhuǎn)。rotateX(a)rotateY(a)rotateZ(a)第16頁15.3.23D旋轉(zhuǎn)在三維變形中，可以讓元素在任第46頁15.3.33D縮放CSS3中，3D縮放處理主要通過scaleZ()和scale3d()兩個(gè)函數(shù)來實(shí)現(xiàn)。當(dāng)scale3d()中X軸和Y軸同時(shí)為1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通過使用3D縮放函數(shù)，可以讓元素在Z軸上按比例縮放。默認(rèn)值為１，當(dāng)值大于１時(shí)，元素放大，反之小于１且大于0.01時(shí)，元素縮小。scale3d()函數(shù)的使用語法如下：scale3d(sx,sy,sz)其中，各參數(shù)作用如下。sx：橫向縮放比例；sy：縱向縮放比例；sz：Z軸縮放比例；第17頁15.3.33D縮放CSS3中，3D縮放處理主要第47頁15.3.43D變形兼容性3D變形在實(shí)際使用這時(shí)同樣需要添加各瀏覽器的私有屬性，并且有個(gè)別屬性在某些主流瀏覽器中并未得到很好的支持：IE10+中3D變形部分屬性未得到很好的支持；Firefox10.0至Firefox15.0版本的瀏覽器，在使用3D變形時(shí)需要添加私有屬性-moz-，但從Firefox16.0+版本開始無需添加瀏覽器私有屬性；Chrome12.0+版本中使用3D變形時(shí)需要添加私有屬性-webkit-；Safari4.0+版本中使用3D變形時(shí)需要添加私有屬性-webkit-；Opera15.0+版本才開始支持3D變形，使用之里需要添加私有屬性-webkit-；移動(dòng)設(shè)備中iOSSafari3.2+、AndroidBrowser3.0+、BlackberryBrowser7.0+、OperaMobile14.0+、ChromeforAndroid25.0+都支持3D變形，但在使用時(shí)需要添加私有屬性-webkit-；FirefoxforAndroid19.0+支持3D變形，但無需添加瀏覽器私有屬性。第18頁15.3.43D變形兼容性3D變形在實(shí)際使用這時(shí)第48頁15.3.6多重變形在CSS3中，不管是2D變形還是3D變形，都可以使用多重變形，它們之間使用空格分隔，具體語法如下：transform:<transform-function><transform-function>其中，transfrom-function是指CSS3中的任何變形函數(shù)。第19頁15.3.6多重變形在CSS3中，不管是2D變形第49頁主要內(nèi)容15.1認(rèn)識(shí)transform15.22D變形15.33D變形15.4變形矩陣15.5本章小結(jié)第20頁主要內(nèi)容15.1認(rèn)識(shí)transform第50頁15.4變形矩陣15.4.1矩陣概述15.4.2變形與坐標(biāo)系統(tǒng)15.4.32D矩陣變形15.4.43D矩陣變形15.4.5使用矩陣實(shí)現(xiàn)多重變形第21頁15.4變形矩陣15.4.1矩陣概述第51頁15.4.1矩陣概述矩陣是一個(gè)數(shù)學(xué)概念，代表一組數(shù)字、符號(hào)或表達(dá)式的矩形陣列。在圖形圖像學(xué)中，矩陣被用在2D屏幕上進(jìn)行3D圖像的線性變換中。實(shí)際上，這種變換處理通過矩陣函數(shù)完成，matrix()函數(shù)允許創(chuàng)建線性變換，matrix3d()函數(shù)允許使用CSS代碼將三維投射到二維坐標(biāo)中。變形處理就是將坐標(biāo)系統(tǒng)中一個(gè)坐標(biāo)點(diǎn)位置乘以一個(gè)變形矩陣即可。第22頁15.4.1矩陣概述矩陣是一個(gè)數(shù)學(xué)概念，代表一組第52頁15.4.2變形與坐標(biāo)系統(tǒng)Web中，每一個(gè)頁面都是一個(gè)坐標(biāo)系統(tǒng)，原點(diǎn)在頁面的左上角(0,0)，其中，X軸方向?yàn)閺淖蟮接?，Y軸方向從上到下，Z軸則是頁面觀察者與頁面之間的距離。Z坐標(biāo)值越大代表觀察者離頁面的距離越近，反之越遠(yuǎn)。當(dāng)對(duì)一個(gè)對(duì)象做變形處理時(shí)，首先建立本地坐標(biāo)系統(tǒng)。默認(rèn)情況下，本地坐標(biāo)系統(tǒng)中的原點(diǎn)在對(duì)象正中央。可以通過在樣式代碼中使用transform-origin屬性來調(diào)整坐標(biāo)原點(diǎn)。在本地坐標(biāo)系統(tǒng)中對(duì)任何坐標(biāo)點(diǎn)進(jìn)行的變形都是參考坐標(biāo)原點(diǎn)進(jìn)行的。第23頁15.4.2變形與坐標(biāo)系統(tǒng)Web中，每一個(gè)頁面都第53頁15.4.32D矩陣變形瀏覽器會(huì)自動(dòng)將二維變形矩陣與一個(gè)數(shù)組[x,y,1]相乘，其中x值和y值分別為一個(gè)坐標(biāo)點(diǎn)