《基于新信息技術的HTML5和CSS3網頁設計進階教程》課件-第9章

第9章CSS3的變形處理9.1Transform2D轉換9.2Transform3D轉換9.3變形后的坐標軸

CSS3中新增了Transform屬性，可以對元素進行變形，即對元素進行移動、縮放轉動、或傾斜等操作。Transform變形轉換可以分為2D和3D轉換。

Transform屬性語法為：

參數(shù)none表示不進行變換，為默認值；<transform-function>表示一個或多個變換函數(shù)，以空格分開。也就是說，Transform屬性可以同時對一個元素進行多種不同的變換操作。

9.1Transform2D轉換

9.1.1移動translate()移動translate()分為3種情況：translate(x，y)表示水平方向和垂直方向同時移動(也就是x軸和y軸同時移動)；translateX(x)表示僅水平方向移動(x軸移動)；translateY(y)表示僅垂直方向移動(y軸移動)。

translate()的參數(shù)為像素，也可以是百分數(shù)。

translate()只是簡單地對元素進行位移，很好理解。通過圖9-1所示，我們能更加直觀地看到它的功能。

圖9-1translate()移動效果示例

需要注意的是，使用translate()移動的元素，在正常流布局中，它所占的位置還是原本的位置，因此，被移動的元素有可能會遮擋其他元素。

如以下代碼：

在上面的代碼中，將a元素設置為inline-block，使用translateY()方法向下移動40像素?？梢钥吹?，a元素向下移動了40像素，但它本來的位置空了出來并沒有被其他內容占據(jù)，其他內容也沒有任何改變，a元素壓在了其他的文字上面。頁面顯示效果如圖9-2所示。

圖9-2translate()移動效果示例

9.1.2縮放scale()

縮放Scale()和移動translate()非常相似，也有3種情況：scale(x，y)表示水平方向和垂直方向同時縮放；scaleX(x)表示僅水平方向縮放；scaleY(y)表示僅垂直方向縮放。具體語法如下：

scale()的參數(shù)為數(shù)值，沒有單位。縮放就是既可以縮小，也可以放大；縮放基數(shù)為1，大于1放大，小于1縮??；也可以是負值，負值為翻轉。縮放的中心點為元素的中心位置。

scale()具體使用效果如圖9-3所示。

scale()還能夠對元素進行翻轉，參數(shù)使用負值即可，效果如圖9-4所示。

圖9-4scale()翻轉效果示例

9.1.3轉動rotate()

rotate()方法通過指定的角度參數(shù)對元素進行2D旋轉，需要先設置transform-origin屬性。具體語法如下：

rotate()方法的參數(shù)設置指旋轉角度，單位跟隨在參數(shù)值后。一般為度數(shù)，單位為“deg”，如果設置的值為正數(shù)則順時針旋轉，如果設置的值為負數(shù)則逆時針旋轉。另外，還有一些其他單位可以使用：

●

deg：1deg為1度，360deg代表一圈。

●

grad：1grad為1梯度，400grad代表一圈。

●?rad：1rad為1弧度，2πrad代表一圈。

●?turn：1turn為1圈，即360deg。

以最常用的deg單位為示例，旋轉效果如圖9-5所示。

圖9-5rotate()旋轉效果示例

9.1.4傾斜skew()

傾斜skew()也有3種情況：skew(x，y)表示水平方向和垂直方向同時傾斜；skewX(x)表示僅水平方向傾斜；skewY(y)表示僅垂直方向傾斜。具體語法如下：

skew()方法的參數(shù)也是角度，單位可使用deg和rad。

以最常用的deg單位為示例，傾斜效果如圖9-6所示。

圖9-6skew()傾斜效果示例

●

skew()方法是Transform2D轉換中最難理解的一個，通過觀察圖9-6，我們可以得出以下簡單結論：

●

skewX(x)：x軸不動，將y軸逆時針旋轉x角度。此旋轉的角度即現(xiàn)在y軸與原來Y軸所成的角度。

●

skewY(y)：y軸不動，將x軸順時針旋轉y角度。此旋轉的角度即現(xiàn)在x軸與原來X軸所成的角度。

●

skew(x，y)：將x軸順時針旋轉y角度，將y軸逆時針旋轉x角度。

●

9.1.5Transform2D綜合應用

圖9-7所示是一個綜合使用Transform2D屬性制作的圖形。

圖9-7Transform2D綜合應用效果示例

9.2Transform3D轉換

CSS3中3D轉換主要包括以下幾種功能函數(shù)：

●?3D移動：包括translateZ()和translate3d()兩個功能函數(shù)。

●?3D轉動：包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數(shù)。

●?3D縮放：包括scaleZ()和scale3d()兩個功能函數(shù)。

9.2.13D坐標系和透視效果

在Transform3D轉換中，我們必須首先了解CSS3中的3D坐標系，如圖9-8所示。

在CSS33D坐標系中，x軸和y軸和2D坐標系一樣，最左上角為(0，0)最右下角為(x，y)，根據(jù)屏幕分辨率不同，x、y的值不同；z軸垂直于屏幕，屏幕往前z軸為正，屏幕往后z軸為負。

圖9-8CSS3中的3D坐標系

電腦顯示屏是一個2D平面，圖像之所以具有立體感(3D效果)，其實只是一種視覺呈現(xiàn)，通過透視可以實現(xiàn)此目的，即同一個物體離我們近，透視效果則是放大，反之，離我們遠則縮小。透視可以使一個2D平面在顯示過程當中呈現(xiàn)3D效果。

在CSS3中，要使用3D轉換效果，必須先給元素添加透視距離，語法如下：

也可以直接給父元素設置一個透視距離，這樣子元素就不必再設置透視距離。父元素設置透視距離使用perspective屬性，語法如下：

perspective()的參數(shù)是透視距離，一般是以像素為單位，可以理解為觀察某個元素所離開的距離。CSS3中透視效果示意圖如圖9-9所示。

圖9-9CSS3中透視效果示意圖

9.2.23D移動translate3d()

3D移動和2D移動的區(qū)別是，2D移動只能向左右(x軸)或者上下(y軸)移動，而3D移動能夠在z軸上移動。具體語法如下：

通過圖9-10所示，我們能夠直觀地看到translate3d()移動的具體效果。

圖9-10translate3d移動效果示意圖

9.2.33D轉動rotate3d()

CSS3為3D轉動提供了4個旋轉函數(shù)：rotateX()，以x軸為旋轉軸從下向上旋轉；rotateY()，以y軸為旋轉軸從左向右旋轉；rotateZ()，其實就是2D轉動rotate()，以中心為原點逆時針旋轉；rotate3d()，以指定的一條直線為旋轉軸進行順時針旋轉。

rotate3d()實際轉換效果如圖9-11所示。

圖9-11rotate3d旋轉效果示意圖

rotate3d(x，y，z，angle)是3D轉動中比較難理解的，我們首先要理解4個參數(shù)中所代表的意義：

●

x：表示旋轉軸x坐標方向的矢量，不帶單位。

●

y：表示旋轉軸y坐標方向的矢量，不帶單位。

●

z：表示旋轉軸z坐標方向的矢量，不帶單位。

●

angle：表示旋轉角度，單位為deg、rad、grad或turn。正的角度值表示順時針旋轉，負值表示逆時針旋轉。

9.2.43D縮放scale3d()

3D縮放函數(shù)包括兩個：scaleZ()，讓元素在z軸上按比例縮放；scale3d()，讓元素在x、y、z軸上同時進行縮放。

scaleZ()和scale3d()單獨使用時沒有任何效果，需要配合其他的變形函數(shù)一起使用才會有效果。下面來看一個實例，為了能看到scaleZ()函數(shù)的效果，我們添加了一個rotateX(45deg)功能，如圖9-12所示。

圖9-12scale3d()縮放效果示意圖

需要注意的是，在進行3D轉動之前應該先進行3D縮放，否則3D縮放不會有相應的作用。scale3d()比scaleZ()只多了x軸和y軸方向的縮放，因此這里不再重復進行演示。

9.2.5整體3D轉換

transform-style屬性規(guī)定如何在3D空間中呈現(xiàn)被嵌套的元素。它有兩個值：

●?flat：子元素不保留其3D位置，默認值。

●?preserve-3d：子元素保留其3D位置。

圖9-13所示是一個綜合使用Transform

3D屬性制作的圖形。先設置父元素的perspective屬性，使所有子元素都支持3D轉換效果；再對所有元素進行3D轉換，形成一個六邊形；最后將父元素根據(jù)x軸旋轉一定的角度。

在整個過程中，如果要使父元素3D轉動時帶動子元素一起轉動，則必須設置transform-style:preserve-3d屬性，否則轉動的效果還是2D效果。頁面效果如圖9-13所示。

圖9-13CSSTransform3D綜合應用效果圖

9.3變形后的坐標軸

在上面的示例中，我們發(fā)現(xiàn)其中有一些問題，當對頁面中的整體再進行繞y軸的3D旋轉后，頁面效果跟我們預期的不一樣。修改ul元素的transform屬性，語法如下：

頁面顯示效果如圖9-14所示。

圖9-14CSSTransform3D綜合應用效果圖(1)

很明顯，我們想讓圖片繞y軸進行旋轉，將另外一張圖片轉到正前方，但得到的效果與我們預想中的不同。

分析原因后我們發(fā)現(xiàn)：旋轉的結果是正確的。因為在進行3D變換時，我們變換了每張圖片的坐標和旋轉角度，因此當再對整體進行繞y軸旋轉時，就得到了以上結果。

在CSS3中，變形處理后的元素，其坐標軸也會發(fā)生相應的變形。根據(jù)此規(guī)則，我們可以將以上代碼進行如下調整：

先將圖片繞y軸進行旋轉，此時，每張圖片的x軸和