变形就是指通过css来改变元素的形状或位置
变形不会影响到页面的布局

transform用来设置元素的变形效果

平移:

• translateX() 沿着x轴方向平移
• translateY() 沿着y轴方向平移
• translateZ() 沿着z轴方向平移

平移元素，百分比是相对于自身计算的

例如：浮动卡片

.box{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin: 0 auto;
            margin-top: 50px;
            transition: all .3s;
        }

        .box:hover{
            transform: translateY(-5px);
            box-shadow: 0 10px 10px rgba(0, 0, 0, .4);
        }

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离。

距离越大,元素离人越近。
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
必须要设置网页的视距

html{
    /*设置当前网页的视距为800px，人眼距离网页的距离*/
    perspective: 800px;
}