元素的变形与平移

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

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

平移:

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

旋转：通过旋转可以使元素沿着xy或z旋转指定的角度

• rotatex()
• rotateY()
• rotateZ()
  backface-visibility: hidden；是否显示元素的背面

缩放：可以变换元素X,Y轴的大小；
变换Z轴需要给元素设置3D效果（transform-style: preserve-3d;）

• scaleX() 水平方向缩放
• scaleY(）垂直方向缩放
• scale(）双方向的缩放

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

变形的原点：
transform-origin:center;

例如：浮动卡片

.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;
}