transform的translate、scale、rotate、skew（2D）的简单使用

<div class="wrapper">
    <div class="inner">
    </div>
</div>

<style>
    .wrapper {
        width: 300px;
        height: 300px;
        /* solid - 实线 */
        /* dashed - 虚线 */
        border: 1px dashed red;
        margin: 0 auto;
    }
    .inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
    }
</style>

border: 1px dashed red; solid为实线；dashed为虚线。
margin: 0 auto;，margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right。
因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）。

1、translate()（平移）

1.1、X轴偏移

.inner {
        width: 200px;
        height: 200px;
        border: 1px solid green;
        /* 
         *X轴方向偏移
         */ 
        /* 1、正向偏移水平长度的50% ，也就是宽度的一半100px*/
        transform: translate(50%);
        /* 2、正向偏移100px */
        transform: translateX(100px);
        /* 3、正向偏移100px */
        transform: translate(100px);
    }

如上图所示，X轴偏移的方法有如下三个

transform: translate(100px)

transform: translate(50%)

transform: translateX(100px)

1.2Y轴偏移

    .inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /* 
         *Y轴方向偏移
         */
        /* 正向偏移100px */
        transform: translate(0,100px);
        transform: translateY(100px);
    }

如上图所示，Y轴偏移的方法有如下两个

transform: translate(0,100px)

transform: translateY(100px)

1.3、X、Y轴都发生偏移

如上图所示，Y轴偏移的方法有如下一个

    .inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /* 
         *X、Y轴方向偏移
         */
        /* X/Y正向偏移100px */
        transform: translate(100px,100px);
    }

注意：上述所说的都是X和Y轴的正向偏移，我们也可以给它设置成负数，使其往反向偏移，如transform: translate(-100px)；即为向x轴的反向（左侧）偏移了100px。

2、scale()（缩放）

该函数只接受数字，不接受类似于”100px“。

2.1、X轴缩放

.inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /*
         *X轴缩放
         */ 
        transform: scale(2,1);
        transform: scaleX(2);
}

如上图所示，X轴缩放的方法有如下两个

transform: scale(2,1)

transform: scaleX(2)

2.2、Y轴缩放

.inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /*
         *Y轴
         */ 
        transform: scale(1,2);
        transform: scaleY(2);
}

如上图所示，Y轴缩放的方法有如下两个

transform: scale(1,2)

transform: scaleY(2)

2.3、X/Y轴缩放

.inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /*
         *X、Y轴
         */ 
        transform: scale(2);
        transform: scale(2,2);
}

如上图所示，Y轴缩放的方法有如下两个

transform: scale(2)

transform: scale(2,2)

3、rotate()（旋转）

该函数只接受一个参数，也就是角度。

    .inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /* deg - 一圈等于360deg */
         transform: rotate(120deg); 
        
        /* grad - 一圈等于400grad */
         transform: rotate(120grad); 
        
        /* rad -一圈等于6.28rad */
        transform: rotate(1rad); 
        
        /* turn - 一圈等于1turn */
        transform: rotate(0.3turn);
}

角度可以由以下四种不同的单位类型来定义。

deg：一圈等于360deg。

grad：一圈等于400grad。

rad：一圈等于6.28rad。

turn：一圈等于1turn。

4、skew()（倾斜）

该函数只接受一个参数，也就是角度。

.inner {
        width: 300px;
        height: 300px;
        border: 1px solid green;
        /* 
         *X轴
         */
        transform: skew(20deg);
        transform: skewX(20deg);
        
        /*
         *Y轴
         */
        transform: skewY(20deg);
        
        /*
         *X/Y轴
         */
        transform: skew(20deg,20deg);
}

4.1、X轴倾斜

如上图所示，X轴倾斜的方法有如下两个

transform: skew(20deg)

transform: skewX(20deg)

4.2、Y轴倾斜

如上图所示，Y轴倾斜的方法有如下一个

transform: skewY(20deg)

4.3、X/Y轴倾斜

如上图所示，X/Y轴倾斜的方法有如下一个

transform: skew(20deg,20deg)