css3骰子（transform初识）_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:56:071584浏览
利用css3制作可旋转的骰子，效果图如下，也可以查看 demo：
首先是骰子的html结构，.page 是骰子的六个页面的 class，#one-#six分别表示六个面，.point 是骰子表面的点数：
<div id="diceWapper"> <div id="dice"> <div id="one" class="page"> <div class="point first"></div> </div> ... </div> </div>
接着是控制骰子旋转方向和度数的控制器：
<div id="controler"> <div class="direction"> <span class="way">X 方向：<span id="xValue">0</span>度</span><input type="range" id="rotateX" min="-360" max="360" value="0" onchange="rotate()" /> </div> ... </div>
通过css设置骰子各个面的位置，
首先设置 3d 场景：-webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; 场景离显示器距离 800，观察位置在显示器中间，
再设置 transform-style 转换类型为 3d 转换，
然后通过 position 来设置各个表面以及表面上点的位置，
最后用 transform-origin 给各个表面设置旋转轴的位置，和用 rotateX、rotateY、rotateZ 设置旋转角度：
#diceWapper{ -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; } #dice{ position: relative; -webkit-transform-style:preserve-3d; } .page{ -webkit-transition: -webkit-transform 1s linear; position:absolute; } #two { -webkit-transform-origin:right; -webkit-transform: rotateY(-90deg); } ... 最后就是通过 input:range 的 change 事件来控制不同方向的旋转角度，获取三个 range 的 value 来设置 #dice 的 webkitTransform 实现转动。
完整代码如下（可运行）：
<!DOCTYPE html><html><head> <title>css3骰子</title> <meta charset="utf-8"/> <style> *{margin:0;padding:0;} body{background-color: #D3D3D3;} #diceWapper{ -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; width: 200px; height: 200px; margin: 200px auto; } #dice{ width: 90px; height: 90px; position: relative; -webkit-transform-style:preserve-3d; } .page{ -webkit-transition: -webkit-transform 1s linear; position:absolute; width: 90px; height: 90px; background-color: #F8F8FF; } #two { -webkit-transform-origin:right; -webkit-transform: rotateY(-90deg); } #three { -webkit-transform-origin:bottom; -webkit-transform: rotateX(90deg); } #four { -webkit-transform-origin:top; -webkit-transform: rotateX(-90deg); } #five { -webkit-transform-origin:left; -webkit-transform: rotateY(90deg); } #six { -webkit-transform: translateZ(-90px); } .point{ width: 20px; height: 20px; box-sizing:border-box; margin: 5px; border-radius:20px; border:2px solid #d7d7d7; background-color: #FF4040; position: absolute; } #one .first{left:30px;top:30px;} #two .first{left:30px;top:15px;} #two .second{left:30px;top:45px;} #three .first{left:0px;top:0px;} #three .second{left:30px;top:30px;} #three .third{left:60px;top:60px;} #four .first{left:15px;top:15px;} #four .second{left:45px;top:15px;} #four .third{left:15px;top:45px;} #four .fourth{left:45px;top:45px;} #five .first{left:15px;top:15px;} #five .second{left:45px;top:15px;} #five .third{left:15px;top:45px;} #five .fourth{left:45px;top:45px;} #five .fifth{left:30px;top:30px;} #six .first{left:15px;top:0px;} #six .second{left:45px;top:0px;} #six .third{left:15px;top:30px;} #six .fourth{left:45px;top:30px;} #six .fifth{left:15px;top:60px;} #six .sixth{left:45px;top:60px;} #controler{ width: 300px; margin: 0 auto; } .way{width: 150px;display: inline-block;} input:range{width: 150px;display: inline-block;} </style> <script type="text/javascript"> function rotate(){ var x = document.getElementById("rotateX").value; var y = document.getElementById("rotateY").value; var z = document.getElementById("rotateZ").value; document.getElementById('dice').style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)"; document.getElementById('xValue').innerText = x; document.getElementById('yValue').innerText = y; document.getElementById('zValue').innerText = z; } </script></head><body> <div id="diceWapper"> <div id="dice"> <div id="one" class="page"> <div class="point first"></div> </div> <div id="two" class="page"> <div class="point first"></div> <div class="point second"></div> </div> <div id="three" class="page"> <div class="point first"></div> <div class="point second"></div> <div class="point third"></div> </div> <div id="four" class="page"> <div class="point first"></div> <div class="point second"></div> <div class="point third"></div> <div class="point fourth"></div> </div> <div id="five" class="page"> <div class="point first"></div> <div class="point second"></div> <div class="point third"></div> <div class="point fourth"></div> <div class="point fifth"></div> </div> <div id="six" class="page"> <div class="point first"></div> <div class="point second"></div> <div class="point third"></div> <div class="point fourth"></div> <div class="point fifth"></div> <div class="point sixth"></div> </div> </div> </div> <div id="controler"> <div class="direction"> <span class="way">X 方向：<span id="xValue">0</span>度</span><input type="range" id="rotateX" min="-360" max="360" value="0" onchange="rotate()" /> </div> <div class="direction"> <span class="way">Y 方向：<span id="yValue">0</span>度</span><input type="range" id="rotateY" min="-360" max="360" value="0" onchange="rotate()" /> </div> <div class="direction"> <span class="way">Z 方向：<span id="zValue">0</span>度</span><input type="range" id="rotateZ" min="-360" max="360" value="0" onchange="rotate()" /> </div> </div></body></html>
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn