一、2D转换

1、旋转变形

（1）将transform的属性设置为rotate()，即可实现旋转变形

            /* 45deg为旋转角度，正数为顺时针，负数为逆时针旋转 */
            transform: rotate(45deg);

（2）transform-origin：设置旋转的自定义变换原点，默认是中心点位置

            /* 以左上角为中心点进行旋转 */
            transform-origin: 0 0;
            /* 以左下角为中心点进行旋转 */
            transform-origin: 0 100%;

2、缩放变形

• 将transform属性的值设置为scale()，即可实现缩放变形
• 当数值小于1时，表示缩小元素；大于1表示放大元素

            /* 放大两倍 */
            transform: scale(2);
            /* 缩小到原来的0.5 */
            transform: scale(0.5);

3、斜切变形

• 将transform属性的值设置为skew()，即可实现斜切变形

            /* 
                10deg: x方向斜切角度
                20deg: y方向斜切角度
             */
            transform: skew(10deg, 20deg);

4、位移变形

• 将transform属性的值设置为translate()，即可实现位移变形
• 和相对定位非常像，位移变形也会在“老家留坑”， “形影分离”

            /* 
                100px: 向右移动
                200px: 向下移动
             */
            transform: translate(100px, 200px);

二、3D转换

1、3D旋转

• 将transform属性的值设置为rotateX()或者rotateY()，即可实现绕横轴、纵轴旋转
• perspective属性用来定义透视强度，可以理解为人眼到舞台的距离，单位是px

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            margin: 50px auto;
            /* 舞台，必须设置perspective属性，否则3D旋转将会失效 */
            perspective: 200px;

        }
        p {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: gold;
            /* 演员，必须设置transform属性 */
            transform: rotateX(30deg);
        }

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

2、空间移动

• 当元素进行3D旋转后，即可继续添加translateX()、translateY()、translateZ()属性让元素在空间进行移动
• 一定记住，空间移动要添加在3D旋转之后

transform: rotateX(30deg) translateX(30px) translateY(100px);