首先要先了解3D的座標軸
其次瞭解 transform-style 和 perspective(length)兩個屬性。
- transform-style: flat(默認 ，二維效果）/ preserve-3d(三維效果)；設置一個元素的transform-style: preserve-3d；隻影響這個元素的子元素(如果孫元素也有3d效果，那麼必須給子元素設置preserve-3d)。這樣所有子元素都可以相對與父元素的平面進行3d變形操作。
- perspective(length) 爲一個元素設置三維透視的距離。僅作用於元素的後代，而不是其元素本身。當perspective: none/0時，相當於沒有perspective(length)。比如你要建立一個小立方體，長寬高時200px。如果你的perspective<200px,那就相當於站在盒子裏面看的結果，如果perspective非常大那就是站在非常遠的地方看（立方體已經小正成了方形）。
當元素沒有設置perpective(length)時，所有後代元素被壓縮在同一個二維平面上，不存在景深的效果。如果設置 perspective(length)後，將會看到三維的效果。默認的透視視角中心在容器（是perspective所在的元素，不是他的後代元素） 的中點，也就是perspective-origin: 50% 50%。當然你也可以自己設置，比如：左上角-webkit-perspective-origin: 0px 0px;
瞭解這兩個屬性之後，接下來開始做立方體：
一、首先先構想一個立方體。
二、上圖中就是構想的以此爲模版，來寫html代碼。
首先要構建一個父元素，這樣才能利用transform-style: preserve-3d屬性使子元素 即就是六個盒子處於一個三維空間內。代碼如下：
<div class="square">
<div class="r1">up</div>
<div class="r2">down</div>
<div class="r3">left</div>
<div class="r4">right</div>
<div class="r5">middle</div>
<div class="r6">after</div>
</div>三、然後開始寫css代碼：
.square{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 100px;
margin-left: -100px;
transform-style: preserve-3d;
transform: rotateY(-30deg) rotateX(57deg);
}正如上圖代碼一樣，先設置父元素，居中只是個人習慣，可要可不要。其餘不可省略。
四、然後給子元素的六個盒子設寬高以及透明度定位。
.square div{
width: 200px;
height: 200px;
opacity: 0.6;
position: absolute;
}五、接下來就是利用移動，旋轉等屬性將六個面轉移到該轉移的位置。代碼如下：
.r1{
background-color: cornflowerblue;
transform:translateZ(100px);
}
.r2{
background-color: rebeccapurple;
transform: translateZ(-100px);
}
.r3{
background-color: aqua;
transform: rotateY(-90deg) translateZ(100px);
}
.r4{
background-color: red;
transform: rotateY(90deg) translateZ(100px);
backface-visibility: hidden;
}
.r5{
background-color: orange;
transform: translateY(100px) rotateX(-90deg);
}
.r6{
background-color: yellow;
transform: rotateX(90deg) translateZ(100px) ;
} 六、最後展示成果
作出立方體，經過短時間的研究，在原有的代碼基礎上讓立方體可以轉動。全部代碼如下，由於是小白，作品有許多瑕疵，歡迎一起評價。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單立方體</title>
<style type="text/css">
.square{
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 200px;
margin-left: -100px;
transform-style: preserve-3d;
transform: rotateY(180deg) rotateX(90deg);
animation: myself 5s linear infinite;
}
.square div{
width: 200px;
height: 200px;
opacity: 0.6;
position: absolute;
}
.r1{
background-color: cornflowerblue;
transform:translateZ(100px);
}
.r2{
background-color: rebeccapurple;
transform: translateZ(-100px);
}
.r3{
background-color: aqua;
transform: rotateY(-90deg) translateZ(100px);
}
.r4{
background-color: red;
transform: rotateY(90deg) translateZ(100px);
backface-visibility: hidden;
}
.r5{
background-color: orange;
transform: translateY(100px) rotateX(-90deg);
}
.r6{
background-color: yellow;
transform: rotateX(90deg) translateZ(100px) ;
}
@keyframes myself {
from{
transform: rotate(0);
}
}
</style>
</head>
<body>
<div class="square">
<div class="r1">up</div>
<div class="r2">down</div>
<div class="r3">left</div>
<div class="r4">right</div>
<div class="r5">middle</div>
<div class="r6">after</div>
</div>
</body>
</html>文章開頭有講過perspective(lenght) 和 transform-style: flat / preserve-3d；接下來講訴下這兩個屬性對於三維效果的重要性。
<1>、當設置perspective(length) ，不設置transform-style: preserve-3d；當元素靜止時，會有立體的效果。
<2>、當設置perspective(length)；不設置transform-style：preserve-3d；當元素旋轉時的效果：
<3>、當設置transform-style: preserve-3d，不設置perspective(length)，當元素靜止時，不會有立體的效果：
<4>、當設置perspective(length)，不設置transform-style：preserve-3d；當元素旋轉時的效果：
<5>、只有當兩個屬性都設置時，無論旋轉或者靜止都會有立體的效果。