transform 3D 变换

(一 ) 3D transform中有三个方法
        1、rotateX(45deg);
        2、rotateY(45deg);
        3、rotateZ(45deg);
        (二)  perspective属性
        perspective的中文意思是透视，视角!
        1、我们都知道近大远小的道理，对于没有rotateX以及rotateY的元素，translateZ的功能就是让元素在自己的眼前或近或远。比方说，我们设置元素perspective为201像素，如下：perspective: 201px;
        则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；
        translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面。
        当translateZ值再变大，超过201像素的时候，该元素看不见了
        2、perspective属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。如下代码示例：
            .stage {
                perspective: 600px;//视距
            }
            
            #stage .box {
                transform: perspective(600px) rotateY(45deg);
            }
        3、perspective-origin
        例：perspective-origin: 25% 75%;
        (三)transform-style: preserve-3d
        transform-style属性也是3D效果中经常使用的，其两个参数，flat|preserve-3d  前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。
        一般而言，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素。
        (四)backface-visibility
        在CSS3的3D世界中，默认情况下，我们是可以看到背后的元素,因此，为了切合实际，我们常常会这样设置，使后面元素不可见：
        backface-visibility:hidden;