transform-style（preserve-3d） 建立3D空间
Perspective 景深
Perspective- origin 景深基点
Transform 新增函数
rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()

最簡單例子：

<div class="box">
    <div></div>
</div>
/*父級*/
.box{
    transform-style: preserve-3d;
    perspective: 800px;
}

/*元素本身*/
.box:hover div{ transform: rotateX(360deg); }
.box div{ transition: 2s; }

一個立方體：

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

6個面，通過position:absolute;定位，每個transform轉換90deg到相應的面上,注意層次遮擋！

/*父元素定義*/
.box{
    transform-style:preserve-3d;
    perspective:1000px;
    perspective-origin:center;
}
.box div:nth-of-type(1) {
    top: -100px;
    transform-origin: bottom;
    transform: rotateX(90deg);
    z-index: 1
}
.box div:nth-of-type(2) {
    left: -100px;
    transform-origin: right;
    transform: rotateY(-90deg);
    z-index: 2
}
.box div:nth-of-type(3) {
    transform: translateZ(-100px);
    z-index: 3
}
.box div:nth-of-type(4) {
    left: 100px;
    transform-origin: left;
    transform: rotateY(90deg);
    z-index: 2
}
.box div:nth-of-type(5) {
    top: 100px;
    transform-origin: top;
    transform: rotateX(-90deg);
    z-index: 1
}

See the Pen PPqyZx by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

从哪个角度看： perspective-origin: right; 多远距离看 perspective: 800px;
从哪个角度看： perspective-origin: right; 必须先设置 perspective后，才有效，
perspective:800可单独设置有效果;

See the Pen YyXRgy by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

於是下面的例子可能是成立

創建動態style方法： 
(function blue() {
  if (document.all) {
    window.style = '//some css code';
    document.createStyleSheet('javascript:style');
  } else {
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = '//some css code';
    document.getElementsByTagName('HEAD').item(0).appendChild(style);
  }
}) ()

See the Pen dYoQQy by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>