关于css 3d
rotateX rotateY rotateZ 都是3d方面的属性，rotateX表示元素以X轴为旋转轴来旋转。（轴从左往右插入元素默认中心），rotateY表示以Y轴为轴来旋转。rotateZ表示以z轴为轴来旋转（又屏幕往里插入元素默认中心）。屏幕是x轴和Y轴构成的二维平面，通常情况下，我们的能看到的都只能在这个平面，所以，当一个矩形rotateX（45deg）的时候，它上部分低于屏幕平面，下部分高于屏幕平面，从而我们看到的只是它旋转后在屏幕平面的投影，这个“压缩”后的面积可以通过勾股定理算出来(实际上还要结合视锥来算，近大远小)。
perspective 透视点（视点），大概含义就是镜头的到屏幕屏幕的距离。有说法是他的默认距离是2000px .通过perspective可以调整这个默认距离，如果一正方形边长200px，rotateX(45deg),perspective设置为200/根号2 ，那么正方形的底边刚好接触到“视点平面”,视点平面可以认为是设置了perspective了的父元素。
.box {
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
perspective: 1410px;
.box-a {
text-align: center;
transform: rotateX(45deg) translateZ(0px);
float: left;
height: 200px;
width: 200px;
background-size: 100% 100%;
background-image: url("image/Bantou.jpg");
h1 {
position: absolute;
width: 100px;
left: ~'calc(50% - 50px)';
bottom: 0px;
padding: 0;
color: #3bf0f3;
}
}
.box-b {
height: 200px;
width: 200px;
background-color: @blue-500;
}
translateX 改变元素每个点的X坐标，同理translateZ改变元素Z坐标的“深浅”，使元素远离本来的屏幕平面，正就是凸出来，负值就是塌下去，近大远小。如果translateZ的值超过perspective的值，就是跑到视点后面了，这就元素就显示不到了
