利用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>
时间： 2025-01-10 22:17:33