一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

前言

昨天讲了css3的animation属性，css3的动画了解了，css3还有2个跟动画搭边的属性，转换（transform）和过渡（transition）。

今天先来学习这个转换属性。

transform

这个是叫转换。分成有2d转换和3d转换。可以对元素做移动，放大/缩小，旋转，倾斜等操作。

移动（translate）

可以对元素进行移动。默认向右,向下,向屏幕的方向移动。

有2d移动，x轴和y轴
和3d移动，x轴，y轴，z轴。
也可以只针对某一轴，比如x轴。

translateX(X) // 只x轴方向移动
translate(x,y) // 在x轴和y轴方向移动，如果只传一个值，代表是x轴。
translate3d(x,y,z) // 在x轴和y轴，z轴方向移动

可以是负数，负数代表着反方向移动。

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: skyblue;
  }
  .move {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    transform: translate(50px, 0px);
    background-color: pink;
  }
</style>
<div class="box">
  <div class="move"></div>
</div>

往右移动50px

scale（放大缩小）

放大元素或者缩小元素，默认是1，不放大缩小。

可以对元素的x轴/y轴/z轴放大缩小。

scaleX(0.8) // x轴方向缩小到0.8倍
scale(1.2, 2) // x轴方向放大1.2倍,y轴放大2倍
scale(2) // x轴和y轴放大2倍，只传一个值，另一个轴也是该值。
scale3d(1, 1, 1.5) // Z轴放大1.5倍（不能省略x,y）

x轴和y轴放大2倍

rotate（旋转）

把元素按照传入的度数旋转,单位是deg。

如果是2d旋转，度数是正的则顺时针旋转，负数则逆时针旋转。

如果是3d旋转，则可以对x轴，y轴，z轴进行旋转。

rotate3d(x,y,z,deg) x,y,z如果为0，则代表那个轴不旋转，为1则那个轴旋转。

rotate(30deg) // 顺时针转动30度
rotate(-45deg) // 逆时针转动45度
rotate3d(1,0,0,30deg)  // 3d旋转 绕x轴旋转30deg
rotateY(30deg)  // 3d旋转 绕y轴旋转30deg

顺时针转动30度

绕x轴旋转45deg

skew（倾斜）

把元素按照传入的角度倾斜。

可以按照x轴，y轴倾斜。 这个只有x轴，y轴的倾斜。正角度x轴是逆时针，y轴是顺时针。

skew(30deg) // x轴倾斜30deg
skewX(-45deg) // x轴倾斜30deg

x轴倾斜30deg

y轴倾斜30deg

如果要实现3d转换，需要在父元素加上perspective属性。不然没有效果。

这个perspective属性是针对3d转换的，定义3d元素距视图的距离。

    .box {
      margin: 100px;
      width: 200px;
      height: 200px;
      background-color: skyblue;
      perspective: 200px;
    }

    .scale {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      transform: translate3d(0, 0, 100px);
      background-color: pink;
    }
    <div class="box">
      <div class="scale"></div>
    </div>

从视觉来看，离我们更近了，所以更大了。

transform-origin

默认转换都是以元素的中心为支点，进行转换的，所以它的默认值是50% 50% 50%,对应着x轴，y轴，z轴。

x轴可选值有left,right,center, 百分比，具体px值。
y轴可选值有top,bottom,center, 百分比，具体px值。 z轴可选值有具体px值。

总结css3的transform属性

前言