当前位置：首页 > CSS

css制作骰子

2026-02-13 03:15:22CSS

使用CSS制作骰子

通过CSS的transform和flexbox可以轻松实现骰子的3D效果和点数布局。以下是一个完整的实现方法：

骰子容器与3D效果

.dice {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
  animation: spin 5s infinite linear;
}

骰子六个面

每个面使用绝对定位并通过transform设置空间位置：

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  border-radius: 10px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.front { transform: translateZ(50px); }
.back { transform: translateZ(-50px); }
.right { transform: translateX(50px) rotateY(90deg); }
.left { transform: translateX(-50px) rotateY(-90deg); }
.top { transform: translateY(-50px) rotateX(90deg); }
.bottom { transform: translateY(50px) rotateX(-90deg); }

点数样式

使用伪元素创建圆点：

.dot {
  width: 15px;
  height: 15px;
  background: black;
  border-radius: 50%;
  position: absolute;
}

/* 示例：4点的布局 */
.face-4 .dot:nth-child(1) { top: 20%; left: 20%; }
.face-4 .dot:nth-child(2) { top: 20%; right: 20%; }
.face-4 .dot:nth-child(3) { bottom: 20%; left: 20%; }
.face-4 .dot:nth-child(4) { bottom: 20%; right: 20%; }

旋转动画

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

HTML结构

<div class="dice">
  <div class="face front face-1">
    <span class="dot"></span>
  </div>
  <div class="face back face-6">
    <!-- 6个点 -->
  </div>
  <!-- 其他4个面 -->
</div>