網(wǎng)頁設(shè)計與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例17知識點(diǎn)：2D變形

我們畢業(yè)啦其實是答辯的標(biāo)題地方2D變形2D變形

在CSS3中，使用transform屬性來實現(xiàn)變形效果，如平移、傾斜、縮放以及旋轉(zhuǎn)等。通過調(diào)用transform屬性中不同的變形函數(shù)能對元素進(jìn)行不同的變形效果。2D變形平移縮放傾斜旋轉(zhuǎn)2D變形使用translate（x,y）函數(shù)可以重新定義元素的坐標(biāo)，實現(xiàn)平移效果。該函數(shù)包含兩個參數(shù)，分別用于定義水平和垂直坐標(biāo)，單位為像素或者百分比，當(dāng)參數(shù)為負(fù)數(shù)時，表示反方向移動元素（向上和向左移動），如果忽略了第2個參數(shù)，則取默認(rèn)值0，也可以使用translateX(x)和translateY(y)分別設(shè)置。平移縮放傾斜旋轉(zhuǎn)2D變形例17-1

在項目project17中新建一個網(wǎng)頁文件，代碼中使用translate（）函數(shù)實現(xiàn)元素的平移效果，文件保存為example01.html。圖17-3translate函數(shù)實現(xiàn)平移

2D變形使用scale（x,y）函數(shù)可以設(shè)置元素的縮放效果。該函數(shù)包含兩個參數(shù)，分別定義水平和垂直方向的縮放倍數(shù)，參數(shù)值為正，表示放大元素，為負(fù)則翻轉(zhuǎn)元素后，再實現(xiàn)縮放。如果第二個參數(shù)省略，則默認(rèn)等于第一個參數(shù)。也可以使用scaleX(x)和scaleY(y)分別設(shè)置。平移縮放傾斜旋轉(zhuǎn)2D變形例17-2

在項目project17中新建一個網(wǎng)頁文件，代碼中使用scale（）函數(shù)實現(xiàn)元素的縮放效果，文件保存為example02.html。圖17-4scale函數(shù)實現(xiàn)縮放

2D變形使用skew（x,y）函數(shù)可以設(shè)置元素的傾斜效果。該函數(shù)包含兩個參數(shù)，分別定義水平和垂直方向的傾斜角度，單位為deg，取值為正數(shù)或者負(fù)數(shù)表示不同的傾斜方向。如果第二個參數(shù)省略，則第二個參數(shù)默認(rèn)為0。也可以使用skewX(x)和skewY(y)分別設(shè)置。平移縮放傾斜旋轉(zhuǎn)2D變形例17-3

在項目project17中新建一個網(wǎng)頁文件，代碼中使用skew（）函數(shù)實現(xiàn)元素的傾斜效果，文件保存為example03.html。圖17-5skew函數(shù)實現(xiàn)傾斜

2D變形使用rotate（deg）函數(shù)可以設(shè)置元素的旋轉(zhuǎn)效果。該函數(shù)只有一個參數(shù)，參數(shù)值為角度數(shù)值，單位為deg，取值為正數(shù)或者負(fù)數(shù)，正數(shù)表示順時針旋轉(zhuǎn)，負(fù)數(shù)表示逆時針旋轉(zhuǎn)。平移縮放傾斜旋轉(zhuǎn)2D變形例17-4

在項目project17中新建一個網(wǎng)頁文件，代碼中使用rotate（）函數(shù)實現(xiàn)元素的旋轉(zhuǎn)效果，文件保存為example04.html。圖17-6rotate函數(shù)實現(xiàn)旋轉(zhuǎn)

2D變形注意如果一個元素需要設(shè)置多種變形效果，可以使用空格把多個變形屬性值隔開。在例17-4中，為box2盒子設(shè)置多種變形效果，代碼如下。transform:translate(200px,30px)scale(1.2)