perspective
说起css 3d 不得不说的一个属性就是perspective（透视点）；个人的理解就是你的眼球到一件物品的距离。近大远小。
当一个正方形离你越近的时候，越靠近你的边就越长，稍微离你远一点的边就短一点。
当正方形离你距离足够远的时候。你看它的边长就越趋近于相等。
以下是不同的perspective距离下的翻转rotateX（30deg）的正方形：
、
perspective有两中写法。
1.当应用在父容器中时。
.parent{
perspective : 800px;
}
.son{
transform ： rotateX（30deg）;
}
2.当应用在子元素中时
.son{
transform : perspective(800px) rotateX(30deg);
}
区别
应用在不同的地方，当然有不一样的效果。
当应用在父元素中时，它是以父元素的中心点正前方为视点（就假设你的视点在父元素的中点（X轴和Y轴中心）的正前方。）
当应用在子元素中时，每个子元素都有独自的视点（子元素的中心点正前方）
以下是效果图：
从上面可以看出，当在父元素中应用perspective时，每个子元素虽然Y翻转的度数一样。但是每个子元素看上去都不一样。
而子元素中应用perspective时，每个子元素看上去都一样！
translateZ（px）；
transform：translateZ（200px）
translateX/Y就不解释了。
translateZ就是用来位移元素的前后距离的（看下面那个图大概就懂）因此可以用来调整元素与视距点的距离！translateZ的距离不能超过perspective值。也不是说不能超过，只是超过后，元素就看不见了。因为元素跑到视距点后面去了（我们总不能脸朝着前面，却看到后面的东西吧）
在不设perspective的情况下浏览器的默认perspective值为201px
重识rotate（）
在默认情况下，
transform：rotate（deg） = transform：rotateZ（deg）
效果沿着中心原点顺时针/逆时针旋转（在平面上）
既然有了rotateZ（），那肯定有rotateX（）、rotateY（）！嗯，没错
先祭出这张3D图
-
rotateX（deg）
沿着X轴翻转
图片.png -
rotateY（deg）
沿着Y轴翻转
图片.png -
rotateZ （deg）
沿着Z轴翻转
图片.png
注：
这三个属性，都是3d属性。如果单纯的设置这三个属性（或其中一个），看起来就是2d效果。如图：
那如何拥有3d效果咧？emmm...其实就是要有透视点，即在父元素，或者子元素中添加perspective属性。
transform-style : flat | preserve-3d
transform-style属性确定元素的子元素是否位于3D空间中，还是在该元素所在的平面内被扁平化。
preserve-3d
指定子元素定位在三维空间内。
flat
指定子元素位于此元素所在平面内。
应用flat的元素（容器），则该元素看上去就是2d的。
而preserve-3d的元素，则定位在3维空间内。
backface-visibility : visible | hidden
这个指定元素背面是否可见。
废话少说，看例子
元素Y轴翻转180度后，齐内容显示正面的镜像。
使用hidden属性后。元素翻转超过90度就会被隐藏！
