我們平常前端編程都是在一個二維平面內(nèi)匆浙，那么如何做一個3D效果呢？比如創(chuàng)建一個立方體，像下面這樣：
我自己總結(jié)了一下圃郊，大概分為以下幾步：
- 創(chuàng)建一個3D窗口
- 確定觀察視角（比如我們是從正中間看甫男，還是從左上或右下看）
- 指明變換是在三維的維度上變換且改。
- 寫具體的變換內(nèi)容。
接下來板驳，我將會以上圖立方體為例子又跛，一步步地向大家演示如何實現(xiàn)。
一若治、創(chuàng)建一個3D窗口
請大家暫停思考一下：為什么需要創(chuàng)建一個3D窗口慨蓝？
先思考，先別往下看哦端幼！
我們平常編程都是在瀏覽器窗口這個二維平面內(nèi)礼烈，瀏覽器默認的也是二維。如果想要寫3D效果婆跑，需要告訴瀏覽器：我現(xiàn)在要寫3D 的東西了此熬，所以創(chuàng)建一個3D的窗口。
如何創(chuàng)建?
perspective
CSS屬性
perspective指定了觀察者與 z=0 平面的距離滑进，使具有三維位置變換的元素產(chǎn)生透視效果犀忱。 z>0 的三維元素比正常大，而 z<0 時則比正常小郊供，大小程度由該屬性的值決定峡碉。
翻譯成人話就是：perspective屬性告訴瀏覽器，這塊里的內(nèi)容是3D的驮审，遵循近大遠小的透視原理鲫寄。
注意：當為元素定義 perspective 屬性時吉执，其子元素會獲得透視效果，而不是元素本身地来。
所以戳玫，我們的如果第一步是創(chuàng)建一個3D區(qū)域，上面那個正方體第一步代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cube</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body,.wrap{
width: 100%;
height: 100%;
}
.wrap{
background-color: pink;
/* 使其子元素水平居中和垂直居中 */
display: flex;
justify-content: center;
align-items: center;
}
.cube{
position: relative;
width: 300px;
height: 300px;
/* 創(chuàng)建3D場景 */
perspective: 800;
-webkit-perspective: 800;
}
.epage{
list-style: none;
width: 150px;
height: 150px;
background-color: #000;
position: absolute;
top: 0;
left: 0;
border: 1px solid #fff;
font-size: 80px;
font-weight: bold;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="cube">
<li class="epage">1</li>
<li class="epage">2</li>
<li class="epage">3</li>
<li class="epage">4</li>
<li class="epage">5</li>
<li class="epage">6</li>
</ul>
</div>
</body>
</html>
效果如下：
二未斑、確定觀察視角
觀察視角是指咕宿，觀察者（其實就是我們）看這個3D場景的視角，比如從上下左右還是中間看蜡秽。
這里的上下左右中間使相對于當前3D場景的角度府阀。（大家不必糾結(jié)在網(wǎng)上搜到的什么消失點之類的東西，透視原理的內(nèi)容芽突，沒必要摳那么細）
我們這里暫定觀察視角為正中間
perspective-origin: 50% 50%;
所以我們的css代碼變成了
.cube{
position: relative;
width: 300px;
height: 300px;
perspective: 800;
-webkit-perspective: 800;
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
}
三试浙、指明變換是在三維的維度上變換
做正方體肯定會用到變換transform，但是transform有二維的（比如rotate()）,也有三維的（比如rotateX()寞蚌、rotateY()田巴、rotateZ()）
所以，我們要告訴瀏覽器挟秤，在3D場景里的transform都是基于三維的transform壹哺。
transform-style: preserve-3d;
官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style
所以我們代碼就變成
.cube{
position: relative;
width: 300px;
height: 300px;
perspective: 800;
-webkit-perspective: 800;
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
transform-style: preserve-3d;
}
四、寫具體的變換內(nèi)容
.epage:nth-child(1){
}
.epage:nth-child(2){
transform-origin: left;
transform: rotateY(90deg);
}
.epage:nth-child(3){
transform-origin: right;
transform: rotateY(-90deg);
}
.epage:nth-child(4){
transform-origin: top;
transform: rotateX(-90deg);
}
.epage:nth-child(5){
transform-origin: bottom;
transform: rotateX(90deg);
}
.epage:nth-child(6){
transform: translateZ(-100px);
}
最后可以看到如下效果：
為了更清楚地看到3D立方體艘刚，我們讓cube轉(zhuǎn)動一下管宵，
.cube{
position: relative;
width: 300px;
height: 300px;
perspective: 800;
-webkit-perspective: 800;
perspective-origin: 50% 50%;
transform-style: preserve-3d;
/* cube轉(zhuǎn)動角度 */
transform: rotateX(30deg) rotateY(30deg) rotateZ(70deg);
}
然后就看到效果了：
