相对于2D转换，3D增加了一个纬度，也让很多东西理解起来要费劲一点儿。

　　transform　　/　　transform-origin　　/　　transform-style　　/　　perspective　　/　　perspective-origin　　/　　backface-visibility

　　

　　transform:　　none　　/　　translate()　　/　　scale()　　/　　rotate()　　/　　skew()　　/　　perspective;

　　　　translate():　　//位置平移，在3D转换中填如三个值，也可以按坐标轴设置translateX()/translateY()/translateZ();

　　　　　　　　　　　　//注意，这个属性的参考点不是transform-origin；而是背景墙，如果translateZ的值为负数，意味着被转换元素被封装到了背景墙后面，所以无论　　backface如何设置，都是看不到元素的；除非你用transform-origin和rotateZ结合把它转到背景墙前面来（这个我也没试过）；

　　　　scale():　　//缩放，scaleX()等；

　　　　rotate():　　//旋转，同上；

　　　　skew():　　//倾斜，同上；

　　　　perspective():　　//定义相对与元素本身的透视距离；即显示屏到背景墙的距离；从而形成一个透视深度；如果translateZ等于该值，则被转换元素将填满整个屏幕；

　　　　　　　　　　　　//此属性可以作于用元素本身的元素的父元素（即舞台或容器），从而左右元素本身或者舞台的深度；

　　　　perspective-origin():　　//定义视角，即把屏幕当成摄像机，你可以通过该值来调整屏幕所在平面内的视图角度，即移动摄像机看到元素侧面；

　　transform-origin:　　//定义元素本身的参考点位置，默认值为50% 50% 0；

　　transform-style:　　flag(默认值)　　/　　preserve-3d;　　//作用于舞台（被转换元素的父元素）；

　　　　flag:　　//默认不保留3D空间效果；

　　　　preserve-3d:　　//保留3D空间效果；

　　backface-visibility:　　//我们平时看到的是元素的正面，如果元素绕X或Y轴旋转180度，我们将看到背面，如果将该值设置为visible，则元素背对我们时继续显示，如果设置为hidden，则不会显示；

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D转换2</title>
    <style type="text/css">
        #stage{
            width:1000px;
            height:600px;
            background:#333;
            position: relative;
            margin:0 auto;
            perspective:800px;
            perspective-origin:50% 50%;
            transform-style:preserve-3d;
        }
        .front,.left,.back,.right{
            width:200px;
            height:100px;
            position: absolute;
            left: 40%;
            top: 40%;
            backface-visibility:visible;        }
        .top,.bottom{
            width:200px;
            height:200px;
            position: absolute;
            left: 40%;
            top: 190px;
            backface-visibility: visible;
        }
        .front{background:#999;transform-origin:50% 50% -100px; transform:translateZ(202px) rotateY(0deg);visibility: hidden;}
        .left{background:#777;transform-origin:50% 50% -100px; transform:translateZ(202px) rotateY(270deg);}
        .back{background:yellow;transform-origin:50% 50% -100; transform:translateZ(2px) rotateY(180deg);}
        .right{background:#444;transform-origin:50% 50% -100px; transform:translateZ(202px) rotateY(90deg);}
        .top{background:#eee;transform-origin:50% 50% -50px; transform:translateZ(152px) rotateX(90deg);}
        .bottom{background:blue;transform-origin:50% 50% -50px; transform:translateZ(152px) rotateX(270deg);}
    </style>
</head>
<body>
    <div id="stage">
        <div class="front">FRONT</div>
        <div class="left">LEFT</div>
        <div class="right">RIGHT</div>
        <div class="back">BACK</div>
        <div class="top">TOP</div>
        <div class="bottom">BOTTOM</div>
    </div>
</body>
</html>