<!DOCTYPE html>
<html>
<head>
<title>骰子</title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
.table{
width: 100%;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px;
background-color: #eee;
-webkit-perspective: 800px;
}
.dice{
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition: all 1s ease-out;
}
.side{
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 20px;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 200px;
font-size: 100px;
font-weight: bold;
}
#side1{
-webkit-transform: translateZ(100px);
}
#side6{
-webkit-transform: translateZ(-100px);
}
#side2{
-webkit-transform: rotateX(90deg) translateZ(-100px);
}
#side4{
-webkit-transform: rotateX(-90deg) translateZ(-100px);
}
#side3{
-webkit-transform: rotateY(-90deg) translateZ(-100px);
}
#side5{
-webkit-transform: rotateY(90deg) translateZ(-100px) ;
}
</style>
</head>
<body>
<div class="table">
<div class="dice" id="dice">
<div class="side" id="side1">1</div>
<div class="side" id="side2">2</div>
<div class="side" id="side3">3</div>
<div class="side" id="side4">4</div>
<div class="side" id="side5">5</div>
<div class="side" id="side6">6</div>
</div>
<div class="control">
<button onclick="turn()">翻滚</button>
</div>
</div>
<script>
function getAngle() {
var angle = Math.ceil(Math.random()*8-4)*90;
return angle;
}
function turn(){
var dice = document.getElementById("dice"),
strAngel = "rotateX("+getAngle()+"deg) rotateY("+getAngle()+"deg) rotateZ("+getAngle()+"deg)";
dice.style.webkitTransform = strAngel;
}
</script>
</body>
</html>
