空间：是从坐标轴角度定义的XYZ三条坐标轴构成了一个立体空间 Z轴位置与视线方向相同
空间转换
平移
属性：
- transform: translate3d(x,y,z);
- transform: translateX();
- transform: translateY();
- transform: translateZ();
取值：像素单位数值/百分比
默认情况下我们看不到Z轴的平移情况
视距
作用：指定了观察者与z=0平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性：（添加给父级，取值范围800-1200）
perspective:视距;
<style>
/*空间转换*/
.father {
perspective: 1000px;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: blue;
transition: all 0.5s;
}
.box:hover {
transform: translateZ(-400px);
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
</body>
当鼠标悬停时，产生近大远小的效果，此时Z轴移动-400px
旋转
左手法则：
属性：根据旋转方向确定取值正负。左手握住旋转轴，拇指指向正值方向。其他手指弯曲方向为旋转正值方向
transform:rotateZ(值)
transform:rotateX(值)
transform:rotateY(值)
