南寧創業小公司 專業做小程序開發 定製 www.zkelm.com
本來只是想學一下flex得排版， 但是因爲學了不理解，所以就跟着做一個骰子， 做了骰子就像讓骰子動起來，
動起來了， 感覺爲什麼不是3d呢。 所以又研究了幾天做一個3d得骰子，【小程序定製：www.zkelm.com】
這章的教程我要做一個3d得骰子，點擊的時候，它就會旋轉， 如圖所示
這個需要用到CSS 裏面的3d transform-style：preserve-3d;
首先要了解的 就是3D的座標： 這點很重要，爲了方便大家的理解，我做了一個圖
1.先製作 一個div 框住6個div 分別是 上下左右前後
<div class="box">
<div class="up">上</div>
<div class="down">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="forward">前</div>
<div class="back">後</div>
<div>
把 box 3d話transform-style： preverse-3d； 此時 .box 就會變成一個擁有3d屬性的 6方體（我是這樣子理解的，不對的話請指正）
.box{
transform-style:preserve-3d;
width:100px;
height:100px;
border:1px solid #666;
}
顯示的結果是這樣子的：
1.我們把left 向左邊移動50px，然後 rotatey（90deg）旋轉90度
.box div{
position:absolute;
width:100%;height:100%;
top:0;left:0;
}
.left{
background:pink;
transform:translatex(-50px) rotatey(90deg);
}
顯示結果看圖：
接下來是右邊
.right{
background:blue;
transform:translatex(50px) rotatey(90deg)
}
顯示結果如下：
up 上得調整， 同理， 只需要往y方向移動 up 到 -50px位置（box高度的一搬， 然後轉動90度即可）
.up{
background:#666;
transform:translatey(-50px) rotatex(90deg)
}
調整查看位置可以在 .box 之中加入 transform：rotatex() rotatey() 對視角位置進行調整觀察
調整後 展示效果更佳， 如圖所示 ， up 已經在頂部！
down得調整 （同理） 往下移動50px 然後旋轉90度
.down{
background:deeppink;
transform:translatey(50px) rotatex(90deg)
}
調整後如圖所示
back調整 這個方向就是沿着Z軸移動50px 即可、 其他都不需要懂 back 則是往後移動50px
.back{
background:yellow;
transform:translatez(-50px);
}
如圖
forward得調整
.forward{
background:green;
tranform:translatez(50px);
}
效果出來了！！！
一個3D骰子就這樣子製作完畢了！ 確實就是要搞清楚那個 xyz 軸就比較容易理解了，
有了這個3d得盒子， 然後在這個基礎上製作一個骰子，還是很簡單的事情！ 下一章開始發佈
以下給出完整的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D骰子得製作transform:preverse-3d</title>
<style>
.box{
margin:100px;
width:100px;
height: 100px;
border:1px solid #666;
position: relative;
transform: rotatex(20deg) rotatey(-30deg);
transform-style: preserve-3d;
}
.box div{
position:absolute;
top:0;
left:0;
width:100%;height: 100%;
font-size: 20px;
text-align: center;
line-height: 100px;
}
.left{
background-color: pink;
transform:translatex(-50px) rotatey(90deg);
}
.right{
background-color: blue;
transform:translatex(50px) rotatey(90deg);
}
.up{
background:#666;
transform:translatey(-50px) rotatex(90deg)
}
.down{
background:deeppink;
transform:translatey(50px) rotatex(90deg)
}
.back{
background:yellow;
transform:translatez(-50px);
}
.forward{
background-color: green;
transform:translatez(50px);
}
</style>
</head>
<body>
<div class="box">
<div class="up">上</div>
<div class="down">下</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="forward">前</div>
<div class="back">後</div>
</div>
</body>
</html>
顯示結果：
[南寧創業小公司，專業做小程序開發與定製：www.zkelm.com]