闲着没事做了个随机骰子 
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<style>
body {
perspective: 3200px;
background-color: #f5f5f5;
}
.box {
transform-style: preserve-3d;
position: relative;
margin: 100px auto;
width: 400px;
height: 400px;
transition: all .3s;
}
.face {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
box-shadow: 0 0 6px #ccc;
font-size: 100px;
color: #66ccffcc;
line-height: 400px;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 为了让旋转中心始终在方块中心，必须先旋转，后调角度！！！！ */
/* 为了让旋转中心始终在方块中心，必须先旋转，后调角度！！！！ */
/* 为了让旋转中心始终在方块中心，必须先旋转，后调角度！！！！ */
.face:nth-child(1) {
background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-ahh.png");
z-index: 2;
transform: translateZ(200px);
}
.face:nth-child(2) {
background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-heng.png");
transform: translateX(-50%) rotateY(-90deg);
}
.face:nth-child(3) {
background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-help.png");
transform: translateX(50%) rotateY(90deg);
}
.face:nth-child(4) {
background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-mang.png");
transform: translateY(-50%) rotateX(90deg);
}
.face:nth-child(5) {
background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-sq.png");
transform: translateY(50%) rotateX(-90deg);
}
.face:nth-child(6) {
background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-ding.png");
transform: translateZ(-200px) rotateY(180deg);
}
</style>
</head>
<body>
<button class="n1">1</button>
<button class="n2">2</button>
<button class="n3">3</button>
<button class="n4">4</button>
<button class="n5">5</button>
<button class="n6">6</button>
<input type="button" value="随机">
<div class="box">
<div class="face">1</div>
<div class="face">2</div>
<div class="face">3</div>
<div class="face">4</div>
<div class="face">5</div>
<div class="face">6</div>
</div>
<script>
var btn = document.querySelectorAll("button");
var cube = document.querySelector(".box");
var randbtn = document.querySelector("input");
//绑定旋转事件
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
Move(this.innerHTML);
});
}
//随机数事件
randbtn.addEventListener("click", function() {
//随机晃一下
for (var i = 1; i <= 10; i++) {
setTimeout((out) => {
randbtn.disabled = true;
Move(Math.round(Math.random(3213) * 5 + 1));
}, i * 500);
}
//解除随机数
setTimeout(() => {
randbtn.disabled = false;
}, 5000);
});
function Move(t) {
switch (parseInt(t)) {
case 1:
cube.style.transform = "";
break;
case 2:
cube.style.transform = "rotateY(90deg)";
break;
case 3:
cube.style.transform = "rotateY(-90deg)";
break;
case 4:
cube.style.transform = "rotateX(-90deg)";
break;
case 5:
cube.style.transform = "rotateX(90deg)";
break;
case 6:
cube.style.transform = "rotateY(180deg)";
break;
}
}
</script>
</body>
</html>