html css做骰子,纯 CSS 制作摇骰子（随机结果）

可以使用CSS的动画和伪元素来制作一个骰子的效果，再使用JavaScript来随机生成骰子的点数。下面是一个简单的示例代码：

HTML代码：

<div class="dice">
  <div class="face front"></div>
  <div class="face back"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
  <div class="face left"></div>
  <div class="face right"></div>
</div>
<button onclick="rollDice()">Roll the Dice</button>

CSS代码：

.dice {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.dice .face {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid black;
  background-color: white;
  opacity: 0.9;
}

.dice .front {
  transform: translateZ(50px);
}

.dice .back {
  transform: translateZ(-50px) rotateX(180deg);
}

.dice .top {
  transform: rotateX(-90deg) translateZ(50px);
}

.dice .bottom {
  transform: rotateX(90deg) translateZ(50px);
}

.dice .left {
  transform: rotateY(-90deg) translateZ(50px);
}

.dice .right {
  transform: rotateY(90deg) translateZ(50px);
}

.dice.roll {
  transform: rotateX(360deg) rotateY(360deg);
}

JavaScript代码：

function rollDice() {
  var dice = document.querySelector('.dice');
  var result = Math.floor(Math.random() * 6) + 1;
  dice.classList.remove('roll');
  void dice.offsetWidth;
  dice.classList.add('roll');
  setTimeout(function() {
    setDiceResult(dice, result);
  }, 1000);
}

function setDiceResult(dice, result) {
  var faces = dice.querySelectorAll('.face');
  for (var i = 0; i < faces.length; i++) {
    faces[i].style.display = 'none';
  }
  var resultFace = dice.querySelector('.face.' + result);
  resultFace.style.display = 'block';
}

在这个示例中，点击“Roll the Dice”按钮会随机生成一个1到6之间的数，并使用CSS动画将骰子旋转一定角度。当动画完成后，使用JavaScript将骰子的点数设置为随机数对应的面。注意，在设置点数前，需要将所有面隐藏起来，只显示随机数对应的面。