Html+Css小tips:变形

变形就是指通过css来改变元素的形状或者位置

变形不会影响到页面的布局

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

1. translateX() 沿着X轴方向平移
2. translateY() 沿着Y轴方向平移
3. translateZ() 沿着Z轴方向平移
   平移元素，百分比是相对于自身计算的

 transform: translateY(-100px);

z轴平移

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素越高，离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视的，如果需要看见效果必须要设置网页的视距

html{
            perspective: 800px;
        }
        body{
            border: 1px red solid;
            background-color:rgb(241, 241,241);
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin: 200px auto;
            transition: 2s;
        }
        body:hover .box1{
            transform: translateZ(1000px);
        }