溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3 轉(zhuǎn)換(Transform)

發(fā)布時間：2020-07-21 03:52:37 來源：網(wǎng)絡(luò) 閱讀：852 作者：frwupeng517 欄目：開發(fā)技術(shù)

轉(zhuǎn)換 transform

能夠?qū)υ剡M行移動、縮放、轉(zhuǎn)動、拉長或拉伸


在CSS中，允許元素實現(xiàn) 2D 和 3D的轉(zhuǎn)換效果,主要包含 ：旋轉(zhuǎn)，縮放，移動，傾斜        

2D ：元素只能在X軸和Y軸平面上發(fā)生變化       

3D ：元素還可以在 Z軸上發(fā)生變化


取值：

none：無轉(zhuǎn)換

2D Transform Functions：

matrix()：

以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應(yīng)用一個[a,b,c,d,e,f]變換矩陣

translate()：

指定對象的2D translation（2D平移）。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則默認值為0

translatex()：

指定對象X軸（水平方向）的平移

translatey()：

指定對象Y軸（垂直方向）的平移

rotate()：

指定對象的2D rotation（2D旋轉(zhuǎn)），需先有 <' transform-origin '> 屬性的定義

scale()：

指定對象的2D scale（2D縮放）。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則默認取第一個參數(shù)的值

scalex()：

指定對象X軸的（水平方向）縮放

scaley()：

指定對象Y軸的（垂直方向）縮放

skew()：

指定對象skew transformation（斜切扭曲）。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則默認值為0

skewx()：

指定對象X軸的（水平方向）扭曲

skewy()：

指定對象Y軸的（垂直方向）扭曲

3D Transform Functions：

matrix3d()：

以一個4x4矩陣的形式指定一個3D變換

translate3d()：

指定對象的3D位移。第1個參數(shù)對應(yīng)X軸，第2個參數(shù)對應(yīng)Y軸，第3個參數(shù)對應(yīng)Z軸，參數(shù)不允許省略

translatez()：

指定對象Z軸的平移

rotate3d()：

指定對象的3D旋轉(zhuǎn)角度，其中前3個參數(shù)分別表示旋轉(zhuǎn)的方向x,y,z，第4個參數(shù)表示旋轉(zhuǎn)的角度，參數(shù)不允許省略

rotatex()：

指定對象在x軸上的旋轉(zhuǎn)角度

rotatey()：

指定對象在y軸上的旋轉(zhuǎn)角度

rotatez()：

指定對象在z軸上的旋轉(zhuǎn)角度

scale3d()：

指定對象的3D縮放。第1個參數(shù)對應(yīng)X軸，第2個參數(shù)對應(yīng)Y軸，第3個參數(shù)對應(yīng)Z軸，參數(shù)不允許省略

scalez()：

指定對象的z軸縮放

perspective()：

指定透視距離


1、2D轉(zhuǎn)換

    使元素在x軸 和 y軸上所進行的轉(zhuǎn)換效果可以稱之為2D轉(zhuǎn)換，包括：位移、縮放、旋轉(zhuǎn)、傾斜


1-1、位移 translate()

    讓元素產(chǎn)生一個位置的移動變化效果

函數(shù)：translate(一個值) -->只在x軸位移距離

          translate(值1，值2) --> 在x軸和y軸的位移距離

取值：數(shù)值 | 百分比，可以取負值

           x為正，則向右移動； x為負，則向左移動。

           y為正，則向下移動； y為負，則向上移動。


代碼示例如下：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>位移</title>
  <style>
    div{
      width:100px;
      height:100px;
      /*絕對定位*/
      position:absolute;
      top:0;
      left:0;
    }
    #d1{
      border:1px dotted #333;
    }
    #d2{
      border:1px solid #f00;
      background-color:#ddd;
      opacity:0.5;
      /*位移*/
      -webkit-transform:translate(50px,50px);
            -moz-transform:translate(50px,50px);
            -ms-transform:translate(50px,50px);
            transform:translate(50px,50px);
    }
  </style>
 </head>
 <body>
  <div id="d1"></div>
  <div id="d2"></div>
 </body>
</html>

CSS3 轉(zhuǎn)換(Transform)


1-2、縮放  scale()

      改變元素的大小稱之為 縮放

函數(shù)：scale(), scale(x), scale(x,y)

         注意：如果只給一個值，那么，第二個默認與第一個值相等

取值：默認值為1

          縮?。?到1之間的數(shù)值

          放大：大于1的數(shù)值


代碼示例如下：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>位移</title>
  <style>
    div{
      width:200px;
      height:200px;
      /*絕對定位*/
      position:absolute;
      top:300px;
      left:400px;
    }
    #d1{
      border:1px dotted #333;
    }
    #d2{
      border:1px solid #f00;
      background-color:#ddd;
      opacity:0.5;
      /*縮放*/
      -webkit-transform:scaleX(1.5);
            -moz-transform:scaleX(1.5);
            -ms-transform:scaleX(1.5);
            transform:scaleX(1.5);
    }
  </style>
 </head>
 <body>
  <div id="d1">原始元素</div>
  <div id="d2">縮放元素</div>
 </body>
</html>

CSS3 轉(zhuǎn)換(Transform)

1-3、旋轉(zhuǎn)   rotate( )

    使元素圍繞著一個點（轉(zhuǎn)換原點）實現(xiàn)角度的變化 稱之為 旋轉(zhuǎn)

函數(shù)：rotate( ndeg )

            注意：需先指定旋轉(zhuǎn)原點 <transform-origin>

取值：n取值為正，按順時針旋轉(zhuǎn)； n取值為負，按逆時針旋轉(zhuǎn)


不指定旋轉(zhuǎn)原點，即按元素中心旋轉(zhuǎn)：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>位移</title>
  <style>
    div{
      width:200px;
      height:200px;
      /*絕對定位*/
      position:absolute;
      top:300px;
      left:400px;
    }
    #d1{
      border:1px dotted #333;
    }
    #d2{
      border:1px solid #f00;
      background-color:#ddd;
      opacity:0.5;
      /*位移*/
      -webkit-transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -ms-transform:rotate(45deg);
      transform:rotate(45deg);
    }
  </style>
 </head>
 <body>
  <div id="d1">原始元素</div>
  <div id="d2">旋轉(zhuǎn)元素</div>
 </body>
</html>

CSS3 轉(zhuǎn)換(Transform)

也可改變默認轉(zhuǎn)換原點：

<style>
  div{
    width:200px;
    height:200px;
    /*絕對定位*/
    position:absolute;
    top:300px;
    left:400px;
  }
  #d1{
    border:1px dotted #333;
  }
  #d2{
    border:1px solid #f00;
    background-color:#ddd;
    opacity:0.5;
    /*更改轉(zhuǎn)換原點*/
    -webkit-transform-origin:0px 0px;
    -moz-transform-origin:0px 0px;
    -ms-transform-origin:0px 0px;
    /*位移*/
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
  }
</style>

CSS3 轉(zhuǎn)換(Transform)

1-4、傾斜  skew( )

    能夠改變元素的形狀，以原點位置，讓元素圍繞著 x軸 或 y軸 按照一定的角度傾斜

函數(shù)： skew( x,y) , skew( x ) <==> skewX( ndeg ) , skewY( ndeg )

取值：角度


<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>位移</title>
  <style>
    div{
      width:200px;
      height:200px;
      /*絕對定位*/
      position:absolute;
      top:300px;
      left:400px;
    }
    #d1{
      border:1px dotted #333;
    }
    #d2{
      border:1px solid #f00;
      background-color:#ddd;
      opacity:0.5;
      /*向x軸傾斜30deg*/
      -webkit-transform:skew(30deg);
      -moz-transform:skew(30deg);
      -ms-transform:skew(30deg);
      transform:skew(30deg);

    }
  </style>
 </head>
 <body>
  <div id="d1">原始元素</div>
  <div id="d2">傾斜元素</div>
 </body>
</html>

CSS3 轉(zhuǎn)換(Transform)

2、3D轉(zhuǎn)換

     在 x軸 和 y軸的基礎(chǔ)上，增加對 z軸（空間軸）的轉(zhuǎn)換效果


2-1、perspective 屬性

    3D元素的透視效果，假定 人眼 到投射平面的距離

注意：（1）、使用 perspective屬性，元素本身不會得到3D轉(zhuǎn)換效果，其子元素才有3D轉(zhuǎn)換效果

          （2）、瀏覽器兼容性，需帶前綴 -webkit-perspective, -moz-perspective, 沒有-ms-


2-2、3D轉(zhuǎn)換--旋轉(zhuǎn)

函數(shù)：rotateX( xdeg )   rotateY( ydeg )  rotateZ( zdeg )

          rotate3d(x,y,z,deg)   x,y,z 大于0，即表示該軸參與旋轉(zhuǎn)

          rotate3d(1,1,1,45deg);  -->  rotateX(45deg)  rotateY(45deg)  rotateZ(45deg);

          rotate3d(1,0,0,45deg);  -->  rotateX(45deg);


代碼示例如下：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #parent{
      width:200px;
      height:200px;
      border:1px solid #ddd;
      margin:100px auto;
      /*1、perspective：定義 人眼 到投射平面的距離*/
      -webkit-perspective:1200px;
      -moz-perspective:1200px;
      perspective:1200px;
    }
    #son{
      width:100px;
      height:100px;
      margin:50px auto;
      background-color:#e4393c;
      /*3D轉(zhuǎn)換-旋轉(zhuǎn)*/
      -webkit-transform:rotate3d(1,1,1,45deg);
      -moz-transform:rotate3d(1,1,1,45deg);
      -ms-transform:rotate3d(1,1,1,45deg);
      transform:rotate3d(1,1,1,45deg);
    }
  </style>
 </head>
 <body>
  <!-- 父元素設(shè)置 perspective ， 子元素實現(xiàn)3d轉(zhuǎn)換 -->
  <div id="parent">
    <div id="son">3d轉(zhuǎn)換元素</div>
  </div>
 </body>
</html>

CSS3 轉(zhuǎn)換(Transform)

2-3、3D轉(zhuǎn)換--位移

      在2D基礎(chǔ)上，增加了對 z軸上的位移距離

函數(shù)：

        translateZ( zdeg )

        取值為正：向著人眼方向移動，物體越大

        取值為負：遠離人眼方向，物體越小

       

        translate3d(x,y,z)：左右，上下，前后


2-4、transform-style 屬性

作用：如何在3D空間中，呈現(xiàn)被嵌套的元素

          規(guī)范了當前元素的子元素，呈現(xiàn)什么樣的位置顯示

取值：

        flat：子元素將不保留其3D位置，呈D位置顯示

        preserve-3d：子元素將保留其3D位置



轉(zhuǎn)換的原點  transform-origin

默認位置：原點是在元素的中心位置

取值：數(shù)值 | 百分比 | 關(guān)鍵字

兩個值：表示x軸 和 y軸的位置

三個值：表示x軸，y軸，z軸


兼容性：

CSS3 轉(zhuǎn)換(Transform)



向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手