当点击骰子时,会旋转骰子,再次点击停止旋转,并得到一个随机点数
以下是html代码部分
<div id="outer">
<div id="menu1">
<span id="menu1-item1"></span>
</div>
<div id="menu2">
<span id="menu2-item1"></span>
<span id="menu2-item2"></span>
</div>
<div id="menu3">
<span id="menu3-item1"></span>
<span id="menu3-item2"></span>
<span id="menu3-item3"></span>
</div>
<div id="menu4">
<span id="menu4-item1"></span>
<span id="menu4-item2"></span>
<span id="menu4-item3"></span>
<span id="menu4-item4"></span>
</div>
<div id="menu5">
<span id="menu5-item1"></span>
<span id="menu5-item2"></span>
<span id="menu5-item3"></span>
<span id="menu5-item4"></span>
<span id="menu5-item5"></span>
</div>
<div id="menu6">
<span id="menu6-item1"></span>
<span id="menu6-item2"></span>
<span id="menu6-item3"></span>
<span id="menu6-item4"></span>
<span id="menu6-item5"></span>
<span id="menu6-item6"></span>
</div>
</div>
css代码部分
<style>
html {
perspective: 800px;
}
#outer {
width: 300px;
height: 300px;
background-color: aliceblue;
margin: 50px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
animation-duration: .1s;
animation-iteration-count: infinite;
}
#outer>* {
width: 300px;
height: 300px;
background-color: aliceblue;
position: absolute;
z-index: 1;
}
@keyframes rotate {
from {
transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
to {
transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
}
}
#menu1 {
transform: translateZ(150px);
}
#menu2 {
transform: rotateX(90deg) translateZ(150px);
}
#menu3 {
transform: rotateX(-90deg) translateZ(150px);
}
#menu4 {
transform: rotateY(90deg) translateZ(150px);
}
#menu5 {
transform: rotateY(-90deg) translateZ(150px);
}
#menu6 {
transform: rotateY(180deg) translateZ(150px);
}
#outer span {
display: block;
width: 40px;
height: 40px;
background-color: red;
position: absolute;
border-radius: 50%;
z-index: 2;
}
#menu1-item1 {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
#menu2>* {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#menu2 #menu2-item1 {
margin-right: 90px;
}
#menu2 #menu2-item2 {
margin-left: 90px;
}
#menu3 #menu3-item1 {
top: 75px;
left: 75px;
margin: auto;
}
#menu3 #menu3-item2 {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#menu3 #menu3-item3 {
bottom: 75px;
right: 75px;
margin: auto;
}
#menu4 #menu4-item1 {
top: 75px;
left: 75px;
}
#menu4 #menu4-item2 {
top: 75px;
right: 75px;
}
#menu4 #menu4-item3 {
bottom: 75px;
left: 75px;
}
#menu4 #menu4-item4 {
bottom: 75px;
right: 75px;
}
#menu5 #menu5-item1 {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#menu5 #menu5-item2 {
top: 75px;
left: 75px;
}
#menu5 #menu5-item3 {
top: 75px;
right: 75px;
}
#menu5 #menu5-item4 {
bottom: 75px;
left: 75px;
}
#menu5 #menu5-item5 {
right: 75px;
bottom: 75px;
}
#menu6 #menu6-item1 {
top: 60px;
left: 90px;
}
#menu6 #menu6-item2 {
top: 60px;
right: 90px;
}
#menu6 #menu6-item3 {
top: 130px;
left: 90px;
}
#menu6 #menu6-item4 {
top: 130px;
right: 90px;
}
#menu6 #menu6-item5 {
bottom: 60px;
left: 90px;
}
#menu6 #menu6-item6 {
bottom: 60px;
right: 90px;
}
</style>
javascript代码部分
<script>
const outer = document.getElementById('outer')
let current = true
// 骰子的开始与停止
outer.addEventListener('click', function () {
if (current) {
outer.style.animationName = 'rotate'
current = false
} else {
const num = Math.ceil(Math.random() * 6)
outer.style.animationName = 'none'
// 骰子的点数
switch (num) {
case 1:
outer.style.transform = 'rotateX(' + 0 + 'deg)'
break
case 2:
outer.style.transform = 'rotateX(-' + 90 + 'deg)'
break
case 3:
outer.style.transform = 'rotateX(' + 90 + 'deg)'
break
case 4:
outer.style.transform = 'rotateY(-' + 90 + 'deg)'
break
case 5:
outer.style.transform = 'rotateY(' + 90 + 'deg)'
break
case 6:
outer.style.transform = 'rotateX(' + 180 + 'deg)'
break
}
current = true
}
})
</script>