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

好的，以下是一个简单的纯CSS制作摇骰子的例子：

HTML代码：

<div class="dice-container">
  <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>
</div>
<button onclick="rollDice()">Roll Dice</button>

CSS代码：

.dice-container {
  width: 100px;
  height: 100px;
  position: relative;
}

.dice {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  box-sizing: border-box;
}

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

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

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

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

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

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

@keyframes roll {
  0% {
    transform: rotateX(0) rotateY(0);
  }
  25% {
    transform: rotateX(360deg) rotateY(0);
  }
  50% {
    transform: rotateX(360deg) rotateY(360deg);
  }
  75% {
    transform: rotateX(0) rotateY(360deg);
  }
  100% {
    transform: rotateX(0) rotateY(0);
  }
}

.roll {
  animation: roll 2s linear forwards;
}

JavaScript代码：

function rollDice() {
  var dice = document.querySelector('.dice');
  dice.classList.remove('roll');
  void dice.offsetWidth; // force reflow
  dice.classList.add('roll');
}

在这个例子中，我们创建了一个名为`dice-container`的容器，其中包含一个名为`dice`的3D骰子。骰子由6个面组成，每个面都是一个具有不同旋转和位移的绝对定位的元素。我们使用CSS动画来模拟骰子滚动的效果，当点击“Roll Dice”按钮时，我们将`roll`类添加到骰子上，触发动画。最后，我们还使用了`void dice.offsetWidth`来强制重流，以便动画可以每次都正确执行。

您可以通过修改`roll`关键帧来调整动画的速度和效果。同时，您也可以通过更改骰子的样式来创建不同类型的骰子。