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

好的，我可以为您提供一个简单的纯 CSS 制作摇骰子的示例代码。请注意，这只是一个基本的示例，您可以根据您的需求进行调整和修改。

HTML 代码：

<div class="dice">
  <div class="face front"></div>
  <div class="face top"></div>
  <div class="face bottom"></div>
  <div class="face left"></div>
  <div class="face right"></div>
  <div class="face back"></div>
</div>

CSS 代码：

.dice {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: rolling 3s infinite;
}

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

.front {
  transform: 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);
}

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

@keyframes rolling {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  25% {
    transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);
  }
  50% {
    transform: rotateX(1440deg) rotateY(720deg) rotateZ(720deg);
  }
  75% {
    transform: rotateX(2160deg) rotateY(1080deg) rotateZ(1080deg);
  }
  100% {
    transform: rotateX(2880deg) rotateY(1440deg) rotateZ(1440deg);
  }
}

这段代码使用了 3D 变换和动画来实现一个摇骰子的效果。您可以通过修改动画的持续时间和变换参数来调整效果。同时，您还可以使用 JavaScript 在骰子停止后生成随机数，并将结果显示在骰子上。