首頁技術(shù)文章正文

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

更新時間:2021-11-01 來源:黑馬程序員 瀏覽量:

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

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

transform: none | transform-functions;

在上面的語法格式中,transform屬性的默認(rèn)值為none,適用于內(nèi)聯(lián)元素和塊元素,表示不進(jì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屬性可以實(shí)現(xiàn)變形效果,主要包括4種變形效果,分別是:平移、縮放、傾斜和旋轉(zhuǎn)。下面,將分別針對這些變形效果進(jìn)行講解。

1.平移

使用translate()方法能夠重新定義元素的坐標(biāo),實(shí)現(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()方法移動元素時,基點(diǎn)默認(rèn)為元素中心點(diǎn),然后根據(jù)指定的X坐標(biāo)和Y坐標(biāo)進(jìn)行移動,效果如圖9-5所示。在該圖中,實(shí)線表示平移前的元素,虛線表示平移后的元素。

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像素。

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

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()方法縮放示意圖如圖所示。其中,實(shí)線表示放大前的元素,虛線表示放大后的元素。

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>的寬度放大兩倍,高度放大三倍。

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

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軸進(jìn)行傾斜,第二個參數(shù)表示相對于Y軸進(jìn)行傾斜,如果省略了第二個參數(shù),則取默認(rèn)值0。skew()方法傾斜示意圖如下所示。其中,實(shí)線表示傾斜前的元素,虛線表示傾斜后的元素。

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°。

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

1635759349269_skew()傾斜效果.jpg

4.旋轉(zhuǎn)

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

transform: rotate(angle);

在上述語法中,參數(shù)angle表示要旋轉(zhuǎn)的角度值。如果角度為正數(shù)值,則按照順時針進(jìn)行旋轉(zhuǎn),否則,按照逆時針旋轉(zhuǎn),rotate()方法旋轉(zhuǎn)示意圖如圖所示。其中,實(shí)線表示旋轉(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.更改變換的中心點(diǎn)

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

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

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

1635761926567_transform-origin.jpg

下面通過一個案例來演示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">原來元素坐標(biāo)位置</div>
         </div>
     </body>
</html>

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

效果圖如下:

1635762445596_transform-origin屬性.jpg

通過上圖可以看出,box02、box03盒子的位置產(chǎn)生了錯位。兩個盒子的初始位置相同,旋轉(zhuǎn)角度相同,發(fā)生錯位的原因是transform-origin屬性改變了box02盒子的旋轉(zhuǎn)中心點(diǎn)。

分享到:
在線咨詢 我要報名
和我們在線交談!