css动画之transform

1、translate（平移）

html

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

css

 .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（缩放）

html

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

css

.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（旋转）

html

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

css

.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（斜切）

html

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

css

 .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（变换轴心）

html

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

css

.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（过渡）

html

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

css

.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;
}