首頁常見問題正文

transform屬性之2D轉(zhuǎn)換用法詳解

更新時間:2023年09月26日11時14分來源:傳智教育瀏覽次數(shù):

CSS3中的變形允許動態(tài)的控制元素，可以在網(wǎng)頁中對元素進行移動、縮放、傾斜、旋轉(zhuǎn)，或結(jié)合這些變形屬性產(chǎn)生復(fù)雜的動畫。通過CSS3中的變形操作，可以讓元素生成靜態(tài)視覺效果，也可以結(jié)合過渡和動畫屬性產(chǎn)生一些新的動畫效果。

CSS3的變形(transform)屬性可以讓元素在一個坐標(biāo)系統(tǒng)中變形。這個屬性包含一系列變形函數(shù)，可以進行元素的移動、旋轉(zhuǎn)和縮放。transform屬性的基本語法如下。

transform: none | transform-functions;

在上面的語法格式中，transform屬性的默認(rèn)值為none，適用于內(nèi)聯(lián)元素和塊元素，表示不進行變形。transform-function用于設(shè)置變形函數(shù)，可以是一個或多個變形函數(shù)列表。

transform-function函數(shù)包括matrix()、translate()、scale()、rotate()和skew()等。具體說明如下。

● matrix()：定義矩形變換，即基于 X和Y 坐標(biāo)重新定位元素的位置。

● translate()：移動元素對象，即基于 X和Y 坐標(biāo)重新定位元素。

● scale()：縮放元素對象，可以使任意元素對象尺寸發(fā)生變化，取值包括正數(shù)、負(fù)數(shù)和小數(shù)。

● rotate()：旋轉(zhuǎn)元素對象，取值為一個度數(shù)值。

● skew()：傾斜元素對象，取值為一個度數(shù)值。

2D轉(zhuǎn)換

在CSS3中，使用transform屬性可以實現(xiàn)變形效果，主要包括4種變形效果，分別是：平移、縮放、傾斜和旋轉(zhuǎn)。下面，將分別針對這些變形效果進行講解。

1.平移

使用translate()方法能夠重新定義元素的坐標(biāo)，實現(xiàn)平移的效果。該函數(shù)包含兩個參數(shù)值，分別用于定義X軸和Y軸坐標(biāo)，其基本語法格式如下。

transform: translate(x-value, y-value);

在上述語法中，x-value 指元素在水平方向上移動的距離，y-value 指元素在垂直方向上移動的距離。如果省略了第二個參數(shù)，則取默認(rèn)值0。當(dāng)值為負(fù)數(shù)時，表示反方向移動元素。

在使用translate()方法移動元素時，基點默認(rèn)為元素中心點，然后根據(jù)指定的X坐標(biāo)和Y坐標(biāo)進行移動，效果如圖9-5所示。在該圖中，實線表示平移前的元素，虛線表示平移后的元素。

translate平移.jpg

下面通過一個案例來演示translate()方法的使用用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素平移</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: #ff0;
            border: 1px solid black;
        }
        #div2 {
            transform: translate(100px, 30px);
            -ms-transform: translate(100px, 30px);　　　　 /* IE9瀏覽器兼容代碼 */
            -webkit-transform: translate(100px, 30px);　　/*Safari andChrome瀏覽器兼容代碼*/
            -moz-transform: translate(100px, 30px);　　　 /*Firefox瀏覽器兼容代碼*/
            -o-transform: translate(100px, 30px);　　　　 /*Opera瀏覽器兼容代碼*/
        }
    </style>
</head>
<body>
    <div>我是元素原來的位置</div>
    <div id="div2">我是元素平移后的位置</div>
</body>
</html>

在上面案例中，使用<div>標(biāo)記定義兩個樣式完全相同的盒子。然后，通過translate()方法將第二個<div>沿X坐標(biāo)向右移動100像素，沿Y坐標(biāo)向下移動30像素。

運行效果如下圖所示：

translate()平移效果

2. 縮放

scale()方法用于縮放元素大小，該函數(shù)包含兩個參數(shù)值，分別用來定義寬度和高度的縮放比例。元素尺寸的增加或減少，由定義的寬度（X軸）和高度（Y軸）參數(shù)控制，其基本語法格式如下。

transform: scale(x-axis, y-axis)；

在上述語法中，x-axis和y-axis參數(shù)值可以是正數(shù)、負(fù)數(shù)和小數(shù)。正數(shù)值表示基于指定的寬度和高度放大元素。負(fù)數(shù)值不會縮小元素，而是翻轉(zhuǎn)元素（如文字被反轉(zhuǎn)），然后再縮放元素。如果第二個參數(shù)省略，則第二個參數(shù)等于第一個參數(shù)值。另外，使用小于1的小數(shù)可以縮小元素。scale()方法縮放示意圖如圖所示。其中，實線表示放大前的元素，虛線表示放大后的元素。

scale()方法縮放示意圖

下面通過一個案例來演示scale()方法的使用，如下。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>縮放效果</title>
    <style type="text/css">
        div{
            width: 100px;
        　   height: 50px;
            background-color: #ff0;
            border: 1px solid black;
        }
        #div2{
            margin: 100px;
            transform: scale(2, 3);
            -ms-transform: scale(2, 3);　　　　   /* IE9瀏覽器兼容代碼 */
            -webkit-transform: scale(2, 3);　        /*Safari andChrome瀏覽器兼容代碼*/
            -moz-transform: scale(2, 3);　　　 /*Firefox瀏覽器兼容代碼*/
            -o-transform: scale(2, 3);　　　　  /*Opera瀏覽器兼容代碼*/
        }
    </style>
</head>
<body>
<div>我是原來的元素</div>
<div id="div2">我是放大后的元素</div>
</body>
</html>

在例上面案例中，使用<div>標(biāo)記定義兩個樣式相同的盒子。并且，通過scale()方法將第二個<div>的寬度放大兩倍，高度放大三倍。

運行案例，效果如下所示。

scale()方法縮放效果

3. 傾斜

skew()方法能夠讓元素傾斜顯示，該函數(shù)包含兩個參數(shù)值，分別用來定義X軸和Y軸坐標(biāo)傾斜的角度。skew()可以將一個對象圍繞著X軸和Y軸按照一定的角度傾斜，其基本語法格式如下。

transform: skew(x-angle, y-angle);

在上述語法中，參數(shù)x-angle和y-angle表示角度值，第一個參數(shù)表示相對于X軸進行傾斜，第二個參數(shù)表示相對于Y軸進行傾斜，如果省略了第二個參數(shù)，則取默認(rèn)值0。skew()方法傾斜示意圖如下所示。其中，實線表示傾斜前的元素，虛線表示傾斜后的元素。

skew()方法傾斜效果

下面通過一個案例來演示skew()方法的使用，如例所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>skew()方法傾斜效果</title>
    <style>
        div {
            margin-left: 30px;
            width: 200px;
            height: 100px;
            background-color: #ff0;
            border: 1px solid black;
        }
        #div2{
            transform: skew(30deg, 10deg);
            -ms-transform: skew(30deg, 10deg);
            -webkit-transform: skew(30deg, 10deg);
            -moz-transform: skew(30deg, 10deg);
            -o-transform: skew(30deg, 10deg);
        }
    </style>
</head>
<body>
    <div>我是原來的元素</div>
    <div id="div2">我是傾斜后的元素</div>
</body>
</html>

在上面案例中，使用<div>標(biāo)記定義了兩個樣式相同的盒子。并且，通過skew()方法將第二個<div>元素沿X軸傾斜30°，沿Y軸傾斜10°。

運行例代碼，效果如圖所示。

1635759349269_skew()傾斜效果.jpg

4.旋轉(zhuǎn)

rotate()方法能夠旋轉(zhuǎn)指定的元素對象，主要在二維空間內(nèi)進行操作。該方法中的參數(shù)允許傳入負(fù)值，這時元素將逆時針旋轉(zhuǎn)。其基本語法格式如下。

transform: rotate(angle);

在上述語法中，參數(shù)angle表示要旋轉(zhuǎn)的角度值。如果角度為正數(shù)值，則按照順時針進行旋轉(zhuǎn)，否則，按照逆時針旋轉(zhuǎn)，rotate()方法旋轉(zhuǎn)示意圖如圖所示。其中，實線表示旋轉(zhuǎn)前的元素，虛線表示旋轉(zhuǎn)后的元素。

rotate旋轉(zhuǎn)效果

下面通過一個案例來演示rotate()方法的使用，如下所示：

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>rotate()方法</title>
    <style>
        div{
            width: 200px;
            height: 80px;
            background-color: #ff0;
            border: 1px solid black;
        }
        #div2{
            transform: rotate(30deg);
            -ms-transform: rotate(30deg);　　　　　/* IE9瀏覽器兼容代碼 */
            -webkit-transform: rotate(30deg);　　　/*Safari andChrome瀏覽器兼容代碼*/
            -moz-transform: rotate(30deg);　　　　/*Firefox瀏覽器兼容代碼*/
            -o-transform: rotate(30deg);　　　　　/*Opera瀏覽器兼容代碼*/
        }
    </style>
</head>
<body>
    <div>我是原來的元素</div>
    <div id="div2">我是旋轉(zhuǎn)后的元素</div>
</body>
</html>

效果如下所示：

rotate旋轉(zhuǎn).jpg

在案例中，使用標(biāo)記定義兩個樣式相同的盒子。并且，通過rotate()方法將第二個元素沿順時針方向旋轉(zhuǎn)30°。

注意：如果一個元素需要設(shè)置多種變形效果，可以使用空格把多個變形屬性值隔開。

5.更改變換的中心點

通過transform屬性可以實現(xiàn)元素的平移、縮放、傾斜及旋轉(zhuǎn)效果，這些變形操作都是以元素的中心點為基準(zhǔn)進行的，如果需要改變這個中心點，可以使用transform-origin屬性，其基本語法格式如下。

transform-origin：x-axis y-axis z-axis;

在上述語法中，transform-origin屬性包含三個參數(shù)，其默認(rèn)值分別為50% 50% 0，各參數(shù)的具體含義如下表所示。

下面通過一個案例來演示transform-origin屬性的使用

<!Doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>transform-origin屬性</title>
    <style>
        #div1 {
            position:relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            padding:10px;
            border: 1px solid black;
        }
        #box02 {
            padding:20px;
            position:absolute;
            border:1px solid black;
            background-color: red;
            transform:rotate(45deg);
            /*旋轉(zhuǎn) 45°*/
            -webkit-transform:rotate(45deg);
            /*Safari andChrome瀏覽器兼容代碼*/
            -ms-transform:rotate(45deg);
            /*IE9瀏覽器兼容代碼 */
            transform-origin:20% 40%;
            /*更改原點坐標(biāo)的位置*/
            -webkit-transform-origin:20% 40%;
            /*Safari andChrome瀏覽器兼容代碼*/
            -ms-transform-origin:20% 40%;
            /*IE9瀏覽器兼容代碼 */
        }

        #box03 {
            padding:20px;
            position:absolute;
            border:1px solid black;
            background-color:#FF0;
            transform:rotate(45deg);
            /*旋轉(zhuǎn) 45°*/
            -webkit-transform:rotate(45deg);
            /*Safari andChrome瀏覽器兼容代碼*/
            -ms-transform:rotate(45deg);
            /*IE9瀏覽器兼容代碼 */
        }
    </style>
</head>
<body>
    　<div id="div1">
        　<div id="box02">更改原點坐標(biāo)位置</div>
        　<div id="box03">原來元素坐標(biāo)位置</div>
        　</div>
    　</body>
</html>

在上面案例中，通過transform的rotate()方法將box02、box03盒子分別旋轉(zhuǎn)45°。然后，通過transform-origin屬性來更改box02盒子原點坐標(biāo)的位置。

效果圖如下：

1635762445596_transform-origin屬性.jpg