transform，形变，包括：位移、旋转、缩放、倾斜。

1.位移translate ------在当前基础上进行移动

transform:translateX(100px) 围绕x轴水平向右移动

2.旋转rotate ------通常围绕z轴旋转,旋转角度单位是deg

transform:rotate(45deg);

3.缩放scale------默认值是1，不放大也不缩小；

transform:scale(0.5);

4.倾斜-------在X轴或Y轴倾斜

形变的参考点：主要针对旋转所用
transform-origin: left top 左上角的原点
transform: rotate(45deg)

transform的应用:3D效果

<style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                /*给需要做3D动画的元素的父元素开启3D效果*/
                transform-style: preserve-3d;
                /*设置距离值:舞台深度*/
                perspective: 2000px;
                /*设置舞台中心点/基准点的位置*/
                perspective-origin: 100px 0;
                /*无论是开启3D模式,还是设置舞台深度,还是设置基准点,都是设置给父元素的,
                只有设置元素背面你不可见,是设置给元素自身的*/
                
            }
            .box{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                text-align: center;
                line-height: 200px;
                font-size: 2em;
                transition: all .3s;
            }
            .box:hover{
                transform: translateZ(100px);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>