3d
CSS3的一些3d样式笔记（perserve方面）
transform: translateZ( ) （没有 transform-style: preserve-3d 就不会有效果，看起来没有什么变化）
transform-style: preserve-3d; （想要有立体效果，就必须给父元素添加这个属性，默认值是 flat，表示2d展示。 preserve-3d 这样相当于开启3d展示。这个属性不继承，想要子元素有空间效果，就必须给父元素添加）
perspective: 100px (景深，透视，通俗点讲就是设置屏幕的距离与物体的距离，值越大距离越远。，绕Y旋转时，最大值应该不超过图片宽度，（实际上超出的值也是有效的），否则可能看不见，因为图片宽度没有那么大，如果是绕中线旋转，那应该是 1/2 的图片宽度，作为属性给父元素设置时，作用于所有子元素）
transform: perspective(100px) （给自己设置景深，必须写在变换的最前面，否则不起效果，如 transform: rotateY(45deg）perspective(100px); 是不起效果的。必须写在前面transform: perspective(100px) rotateY(45deg); 因为 transform 这个属性，前面的值会影响后面的值）
相当于给父元素添加 perspective: 时，是一个人看所有东西，给子元素添加 transform: perspective( ) 时，是每个东西都分配一个人去看（而且他们相对于自己对应的物体的位置是一样的）
perspective-origin: 100% 0% （视角方向）
transform-origin: 100% 0% (设置以什么点开启变换)
backface-visibility: hidden; （翻转到背后时背景是否可见，默认为 visible ，背景可见）
一旦用 3d 属性，可以触发设备的硬件加速，让浏览器性能提升。
