transform屬性2D轉(zhuǎn)換用法詳細(xì)介紹

更新時(shí)間:2021-11-01 來(lái)源:黑馬程序員瀏覽量:

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

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

transform: none | transform-functions;

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

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

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

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

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

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

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

2D轉(zhuǎn)換

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

1.平移

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

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

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

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

translate平移.jpg

下面通過(guò)一個(gè)案例來(lái)演示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>我是元素原來(lái)的位置</div>
    <div id="div2">我是元素平移后的位置</div>
</body>
</html>

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

運(yùn)行效果如下圖所示：

translate()平移效果

2. 縮放

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

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

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

scale()方法縮放示意圖

下面通過(guò)一個(gè)案例來(lái)演示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>我是原來(lái)的元素</div>
<div id="div2">我是放大后的元素</div>
</body>
</html>

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

運(yùn)行案例，效果如下所示。

scale()方法縮放效果

3. 傾斜

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

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

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

skew()方法傾斜效果

下面通過(guò)一個(gè)案例來(lái)演示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>我是原來(lái)的元素</div>
    <div id="div2">我是傾斜后的元素</div>
</body>
</html>

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

運(yùn)行例代碼，效果如圖所示。

1635759349269_skew()傾斜效果.jpg

4.旋轉(zhuǎn)

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

transform: rotate(angle);

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

rotate旋轉(zhuǎn)效果

下面通過(guò)一個(gè)案例來(lái)演示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>我是原來(lái)的元素</div>
    <div id="div2">我是旋轉(zhuǎn)后的元素</div>
</body>
</html>

效果如下所示：

rotate旋轉(zhuǎn).jpg

在案例中，使用標(biāo)記定義兩個(gè)樣式相同的盒子。并且，通過(guò)rotate()方法將第二個(gè)元素沿順時(shí)針?lè)较蛐D(zhuǎn)30°。

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

5.更改變換的中心點(diǎn)

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

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

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

下面通過(guò)一個(gè)案例來(lái)演示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%;
            /*更改原點(diǎn)坐標(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">更改原點(diǎn)坐標(biāo)位置</div>
        　<div id="box03">原來(lái)元素坐標(biāo)位置</div>
        　</div>
    　</body>
</html>

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

效果圖如下：

1635762445596_transform-origin屬性.jpg