CSS3 中的 2D 变换

最新推荐文章于 2022-07-01 16:24:31 发布

Peter_one

最新推荐文章于 2022-07-01 16:24:31 发布

阅读量481

点赞数

分类专栏： css3 文章标签：对象 2d css3 变形

本文链接：https://blog.csdn.net/zp511253886/article/details/53001192

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.transform 设置对象的转换。

取值：none | <transform-function>

（1）none：无转换

（2）2D Transform Functions：

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轴的（垂直方向）扭曲
matrix()：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵

（3）3D Transform Functions：

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()：指定透视距离
matrix3d()：以一个4x4矩阵的形式指定一个3D变换

示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>2D transform</title>
  <style>
    body{
      padding: 100px 0;
    }
    h2{
      line-height: 30px;
      font-size:16px;
      font-family:'Microsoft Yahei';
      width:860px;
      margin: 30px auto 20px;
      border-bottom:1px #ccc solid;
    }
    .test{
      width:900px;
      margin:0 auto 20px;
      list-style:none;
    }
    .test:after{
      content: '';
      clear: both;
      display: block;
      overflow: hidden;
    }
    .test li{
      float:left;
      margin:0 20px 30px 0;
      border:1px solid #000;
    }
    .test li p{
      width:300px;
      height:100px;
      margin:0 0 50px;
      background:#369;
      color: #fff;
    }
    .test .matrix{
      transform:matrix(0,1,1,1,10,10);
    }
    .test .translate p{
      transform:translate(10px,10px);
    }
    .test .translate2 p{
      transform:translate(-10px,-10px);
    }
    .test .translateX p{
      transform:translateX(20px);
    }
    .test .translate3 p{
      transform:translate(20px);
    }
    .test .translateY p{
      transform:translateY(10px);
    }
    .test .translate4 p{
      transform:translate(0,10px);
    }
    .test .rotate{
      transform:rotate(-5deg);
    }
    .test .rotate2{
      transform:rotate(5deg);
    }
    .test .scale{
      transform:scale(.8);
    }
    .test .scale2{
      transform:scale(1.2);
    }
    .test .skew{
      transform:skew(-5deg);
    }
    .test .skew2{
      transform:skew(-5deg,-5deg);
    }
  </style>
</head>
<body>
  <h2>矩阵变换：matrix()</h2>
  <ul class="test">
    <li class="matrix">
      <p>transform:matrix(0,1,1,1,10,10)</p>
    </li>
  </ul>

  <h2>平移：translate(), translateX(), translateY()</h2>
  <ul class="test">
    <li class="translate">
      <p>transform:translate(5%,10px)</p>
    </li>
    <li class="translate2">
      <p>transform:translate(-10px,-10px)</p>
    </li>
    <li class="translateX">
      <p>transform:translateX(20px)</p>
    </li>
    <li class="translate3">
      <p>transform:translate(20px)</p>
    </li>
    <li class="translateY">
      <p>transform:translateY(10px)</p>
    </li>
    <li class="translate4">
      <p>transform:translate(0,10px)</p>
    </li>
  </ul>

  <h2>旋转：rotate()</h2>
  <ul class="test">
    <li class="rotate">
      <p>transform:rotate(-15deg)</p>
    </li>
    <li class="rotate2">
      <p>transform:rotate(15deg)</p>
    </li>
  </ul>

  <h2>缩放：scale()</h2>
  <ul class="test">
    <li class="scale">
      <p>transform:scale(.8)</p>
    </li>
    <li class="scale2">
      <p>transform:scale(1.2)</p>
    </li>
  </ul>

  <h2>扭曲：skew()</h2>
  <ul class="test">
    <li class="skew">
      <p>transform:skew(-5deg)</p>
    </li>
    <li class="skew2">
      <p>transform:skew(-5deg,-5deg)</p>
    </li>
  </ul>
</body>
</html>