CSS3 轉換(Transform)

轉換 transform
css

可以對元素進行移動、縮放、轉動、拉長或拉伸html


在CSS中,容許元素實現 2D 和 3D的轉換效果,主要包含 :旋轉,縮放,移動,傾斜        web

2D :元素只能在X軸和Y軸平面上發生變化       瀏覽器

3D :元素還能夠在 Z軸上發生變化ide


取值:函數

none:無轉換spa

2D Transform Functions:3d

matrix():orm

以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換,至關於直接應用一個[a,b,c,d,e,f]變換矩陣htm

translate():

指定對象的2D translation(2D平移)。第一個參數對應X軸,第二個參數對應Y軸。若是第二個參數未提供,則默認值爲0

translatex():

指定對象X軸(水平方向)的平移

translatey():

指定對象Y軸(垂直方向)的平移

rotate():

指定對象的2D rotation(2D旋轉),需先有 <' transform-origin '> 屬性的定義

scale():

指定對象的2D scale(2D縮放)。第一個參數對應X軸,第二個參數對應Y軸。若是第二個參數未提供,則默認取第一個參數的值

scalex():

指定對象X軸的(水平方向)縮放

scaley():

指定對象Y軸的(垂直方向)縮放

skew():

指定對象skew transformation(斜切扭曲)。第一個參數對應X軸,第二個參數對應Y軸。若是第二個參數未提供,則默認值爲0

skewx():

指定對象X軸的(水平方向)扭曲

skewy():

指定對象Y軸的(垂直方向)扭曲

3D Transform Functions:

matrix3d():

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

translate3d():

指定對象的3D位移。第1個參數對應X軸,第2個參數對應Y軸,第3個參數對應Z軸,參數不容許省略

translatez():

指定對象Z軸的平移

rotate3d():

指定對象的3D旋轉角度,其中前3個參數分別表示旋轉的方向x,y,z,第4個參數表示旋轉的角度,參數不容許省略

rotatex():

指定對象在x軸上的旋轉角度

rotatey():

指定對象在y軸上的旋轉角度

rotatez():

指定對象在z軸上的旋轉角度

scale3d():

指定對象的3D縮放。第1個參數對應X軸,第2個參數對應Y軸,第3個參數對應Z軸,參數不容許省略

scalez():

指定對象的z軸縮放

perspective():

指定透視距離


一、2D轉換

    使元素在x軸 和 y軸上所進行的轉換效果能夠稱之爲2D轉換,包括:位移、縮放、旋轉、傾斜


1-一、位移 translate()

    讓元素產生一個位置的移動變化效果

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

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

取值:數值 | 百分比,能夠取負值

           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>

wKioL1g1X2CRhOCeAAAE3Bu7CuI980.png


1-二、縮放  scale()

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

函數:scale(), scale(x), scale(x,y)

         注意:若是隻給一個值,那麼,第二個默認與第一個值相等

取值:默認值爲1

          縮小:0到1之間的數值

          放大:大於1的數值


代碼示例以下:

<!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>

wKioL1g1YkiA_IELAAAPatS2CTE470.png

1-三、旋轉   rotate( )

    使元素圍繞着一個點(轉換原點)實現角度的變化 稱之爲 旋轉

函數:rotate( ndeg )

            注意:需先指定旋轉原點 <transform-origin>

取值:n取值爲正,按順時針旋轉; 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">旋轉元素</div>
 </body>
</html>

wKioL1g2SwCDB7vcAAAYCW3gsbs133.png

也可改變默認轉換原點:

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

wKioL1g2S8OgH_rGAAAXjZ_V1K4451.png

1-四、傾斜  skew( )

    可以改變元素的形狀,以原點位置,讓元素圍繞着 x軸 或 y軸 按照必定的角度傾斜

函數: 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>

wKioL1g2TrPTC9cxAAAf6uxLdSE439.png

二、3D轉換

     在 x軸 和 y軸的基礎上,增長對 z軸(空間軸)的轉換效果


2-一、perspective 屬性

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

注意:(1)、使用 perspective屬性,元素自己不會獲得3D轉換效果,其子元素纔有3D轉換效果

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


2-二、3D轉換--旋轉

函數:rotateX( xdeg )   rotateY( ydeg )  rotateZ( zdeg )

          rotate3d(x,y,z,deg)   x,y,z 大於0,即表示該軸參與旋轉

          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;
      /*一、perspective:定義 人眼 到投射平面的距離*/
      -webkit-perspective:1200px;
      -moz-perspective:1200px;
      perspective:1200px;
    }
    #son{
      width:100px;
      height:100px;
      margin:50px auto;
      background-color:#e4393c;
      /*3D轉換-旋轉*/
      -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>
  <!-- 父元素設置 perspective , 子元素實現3d轉換 -->
  <div id="parent">
    <div id="son">3d轉換元素</div>
  </div>
 </body>
</html>

wKioL1g2U9WADpWpAAAXZGdH4AA923.png

2-三、3D轉換--位移

      在2D基礎上,增長了對 z軸上的位移距離

函數:

        translateZ( zdeg )

        取值爲正:向着人眼方向移動,物體越大

        取值爲負:遠離人眼方向,物體越小

       

        translate3d(x,y,z):左右,上下,先後


2-四、transform-style 屬性

做用:如何在3D空間中,呈現被嵌套的元素

          規範了當前元素的子元素,呈現什麼樣的位置顯示

取值

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

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



轉換的原點  transform-origin

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

取值:數值 | 百分比 | 關鍵字

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

三個值:表示x軸,y軸,z軸


兼容性:

wKiom1g1WwTwFOVuAABAfqDgTYI449.png

相關文章
相關標籤/搜索