今天带大家用HTML+CSS+JS实现动态骰子投掷效果，下面来看看实现的效果：
点击开始投掷，骰子开始滚动。
点击停止投掷，骰子面会随机定在一个点数
那么如何实现呢？请听我细细讲解：
一、骰子面的样式与布局
1、样式：
1、其中每一面大量的运用了flex布局来实现了骰面上圆点的位置。
2、每一面都用了 transform: rotateY(xxxdeg) translateZ(xxxpx)，用于调整面与面的位置，以组合成一个3D的视觉效果。
3、move动画实现了骰子翻滚的效果。
<style>
@keyframes move {
from {
transform: rotateY(0deg) rotateZ(0deg);
}
to {
transform: rotateY(360deg) rotateZ(360deg);
}
}
main {
margin: 120px auto;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateY(360deg) rotateZ(360deg);
}
.demainplay {
margin: 120px auto;
width: 100px;
height: 100px;
display: flex;
transform-style: preserve-3d;
animation: move 1s linear infinite;
}
.tran {
transform: rotateY(-180deg) translateZ(-50px)
}
.demainplay1 {
margin: 120px auto;
width: 600px;
height: 100px;
display: flex;
}
.one,
.two,
.three,
.four,
.five,
.six {
border-radius: 5px;
position: absolute;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(232, 232, 232) !important;
box-shadow: 1px 1px 5px 5px rgb(237, 236, 236) inset;
}
.one {
width: 100px;
height: 100px;
border: 1px solid;
display: flex;
justify-content: center;
align-items: center;
transform: translateZ(50px);
}
.two {
width: 100px;
height: 100px;
border: 1px solid;
display: flex;
flex-grow: 1;
flex-shrink: 1;
flex-direction: column;
justify-content: space-around;
align-items: center;
transform: rotateY(90deg) translateZ(50px);
}
.three {
width: 100px;
height: 100px;
border: 1px solid;
display: flex;
flex-direction: column;
justify-content: space-around;
/* align-items: center; */
padding: 5px 5px;
box-sizing: border-box;
transform: rotateY(270deg) translateZ(50px);
}
.four {
box-sizing: border-box;
padding-left: 5px;
padding-right: 5px;
width: 100px;
height: 100px;
border: 1px solid;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
transform: rotateY(180deg) translateZ(50px);
}
.five {
box-sizing: border-box;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
height: 100px;
border: 1px solid;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
transform: rotateX(90deg) translateZ(50px);
}
.six {
width: 100px;
height: 100px;
border: 1px solid;
display: flex;
flex-direction: column;
justify-content: space-around;
flex-wrap: wrap;
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;
transform: rotateX(270deg) rotateY(0deg) translateZ(50px);
}
.thround1 {
height: 30px;
width: 30px;
background-color: red;
border-radius: 50%;
box-shadow: 0px 2px 5px 1px rgb(160, 5, 5) inset;
}
.thround2 {
height: 30px;
width: 30px;
background-color: red;
border-radius: 50%;
align-self: center;
box-shadow: 0px 2px 5px 1px rgb(160, 5, 5) inset;
}
.thround3 {
height: 30px;
width: 30px;
background-color: red;
border-radius: 50%;
align-self: flex-end;
box-shadow: 0px 2px 5px 1px rgb(160, 5, 5) inset;
}
.round1 {
height: 27px;
width: 27px;
background-color: red;
border-radius: 50%;
box-shadow: 0px 2px 5px 1px rgb(160, 5, 5) inset;
}
.round2 {
height: 27px;
width: 27px;
background-color: red;
border-radius: 50%;
margin-left: 10px;
box-shadow: 0px 2px 5px 1px rgb(160, 5, 5) inset;
}
.deround {
height: 27px;
width: 27px;
background-color: red;
border-radius: 50%;
margin-left: 30px;
margin-right: 30px;
box-shadow: 0px 2px 5px 1px rgb(160, 5, 5) inset;
}
.round {
height: 30px;
width: 30px;
background-color: red;
border-radius: 50%;
box-shadow: 0px 2px 5px 1px rgb(160, 5, 5) inset;
}
button {
width: 100px;
height: 40px;
display: block;
border-radius: 10px;
margin: auto;
margin-top: 20px;
background-color: rgb(255, 125, 50);
border: none;
color: rgb(255, 255, 255);
font-size: 18px;
transition: 0.3s;
}
button:hover{
color:rgb(255, 125, 50) ;
background-color: rgb(255, 255, 255);
border: 1px solid;
box-shadow: 2px 5px 5px 1px rgb(255, 196, 145);
}
.hide {
display: none;
}
.show {
display: flex;
transform: rotateY(-180deg)
}
</style>2、HTML结构
<main>
<div class="one hide show">
<div class="round"></div>
</div>
<div class="two hide show">
<div class="round"></div>
<div class="round"></div>
</div>
<div class="three hide show">
<div class="thround1"></div>
<div class="thround2"></div>
<div class="thround3"></div>
</div>
<div class="four hide show">
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
<div class="round"></div>
</div>
<div class="five hide show">
<div class="round1"></div>
<div class="round1"></div>
<div class="deround"></div>
<div class="round1"></div>
<div class="round1"></div>
</div>
<div class="six hide show">
<div class="round2"></div>
<div class="round2"></div>
<div class="round2"></div>
<div class="round2"></div>
<div class="round2"></div>
<div class="round2"></div>
</div>
</main>
<button>开始投掷</button>
<button>停止投掷</button>二、骰子JS的实现
<script>
var mainplay = document.querySelectorAll('button')
var deplay = document.querySelector('main')
var tou = document.querySelectorAll('main>div')
mainplay[0].onclick = function () {
for (var i = 0; i < tou.length; i++) {
tou[i].classList.remove('hide')
tou[i].classList.remove('show')
}
deplay.classList.add('demainplay')
}
mainplay[1].onclick = function () {
deplay.classList.remove('demainplay')
for (var i = 0; i < tou.length; i++) {
tou[i].classList.add('hide')
}
var ran = Math.floor(Math.random() * 6)
tou[ran].classList.add('show')
}
</script>