css动画之transform

1、translate（平移）

<div class="box"></div>

 .box {
      width: 200px;
      height: 200px;
      background-color: #9198e5;
      margin: 30px auto;

      transform: translate(300px);

      /*
          transform 变换
              translate   2d平移
                  默认 第一个参数x  第二个参数y
                                   如果y没给，则为零
                  translateX   translateY   translateZ(需要开启3d才能使用)
      */
}

2、scale（缩放）

<div class="box"></div>

.box {
     width: 200px;
      height: 200px;
      margin: 0 auto;
      background-color: #00b3f1;
      transition: .3s;

      /*
          transform 缩放
             scale
                  单位  倍数（原始大小的倍数）
                  如果没有写方向，默认是X和Y
                  scaleX        scaleY       scaleZ
     */
  }
.box:hover {
    transform: scale(.5);
}

3、rotate（旋转）

<div class="box"></div>

.box {
     width: 200px;
      height: 200px;
      margin: 50px auto;
      background-color: #00b3f1;

      transition: .3s;
 }
 .box:hover {
     transform: rotate(45deg);
      /*
          transform  旋转
              rotate
                  单位  角度（edg）
                      如果没指定XYZ，则默认为Z
                      rotateX|  rotateY|   rotateZ
      */
 }

4、skew（斜切）

<div class="box"></div>

.box {
     width: 200px;
      height: 200px;
      margin: 50px auto;
      background-color: #00b3f1;

      transition: .3s;
 }
.box:hover {
     transform: skew(45deg,10deg);
      /*
          transform  斜切
              skew
                  单位  角度（edg） 支持正负值
                      如果没写第二个参数，默认为0
                      rotateX|  rotateY
      */
}

5、origin（变换轴心）

<div class="box"></div>

.box {
      width: 200px;
      height: 200px;
      margin: 50px auto;
      background-color: #00b3f1;
      transition: .5s;

      transform-origin: top left;
      /*
              transform-origin  变幻轴心
                  默认值是 center center
      */
}
.box:hover {
     transform: rotate(45deg);
}

6、transition（过渡）

<div class="box"></div>

.box {
      width: 200px;
      height: 200px;
      margin: 50px auto;
      background-color: #00b3f1;

      transition: all .5s .5s linear;
      /*
          transition: 哪个属性动 运动在多长时间完成 延迟时间 运动类型；
      */
}

.box:hover {
      width: 400px;
      height: 500px;
      opacity: .5;
}