CSS3 转换(Transform)

时间  2020-07-08
标签 css3 css 转换 transform 栏目 CSS 繁體版
原文   原文链接

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程