纯 CSS 制作摇骰子（随机结果）

纯 CSS 制作摇骰子（随机结果）

大家好，我是 Steven。这一期，我们会做一个摇骰子的效果。等等，这个很容易？那就挑战一下，不用 JavaScript，只用 CSS 去制作，我们来看看怎么实现。

HTML 结构

<div class="dice-container">
  <div class="dice">
    <div class="side side-1">1</div>
    <div class="side side-2">2</div>
    <div class="side side-3">3</div>
    <div class="side side-4">4</div>
    <div class="side side-5">5</div>
    <div class="side side-6">6</div>
  </div>
</div>

CSS 样式

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

.dice {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: roll 5s infinite;
}

.side {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.side-1 {
  transform: translateZ(50px);
}

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

.side-3 {
  transform: translateZ(50px) rotateY(180deg);
}

.side-4 {
  transform: translateZ(50px) rotateY(270deg);
}

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

.side-6 {
  transform: translateZ(50px) rotateX(180deg);
}

@keyframes roll {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }

  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }

  100% {
    transform: rotateX(0deg) rotateY(360deg);
  }
}

原理

这个骰子是由一个六面体盒子组成的，每个面都有一个数字。当我们点击骰子时，骰子就会开始旋转。为了让骰子看起来随机一点，我们首先将一到六的顺序打乱。然后，我们使用 CSS 的 animation 属性来让骰子旋转。动画的持续时间为 5 秒，并且是无限循环的。

当骰子旋转时，它会从不同的角度显示不同的面。为了让骰子看起来更真实，我们使用 CSS 的 backface-visibility 属性来隐藏骰子的背面。这样，当骰子旋转时，我们只能看到骰子的正面。

结语

这个纯 CSS 制作的骰子效果非常简单，但它却非常有趣。它可以用来制作各种游戏，比如掷骰子游戏、扑克牌游戏等等。如果您想了解更多关于 CSS 的知识，可以访问我们的网站或关注我们的公众号。