南寧創業小公司 專業做小程序開發 定製 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]