css怎么制作骰子

使用CSS制作骰子

通过CSS的transform和flexbox可以创建一个3D骰子效果，结合HTML元素和CSS样式实现骰子点数布局。

HTML结构

<div class="dice">
  <div class="face front">1</div>
  <div class="face back">6</div>
  <div class="face right">4</div>
  <div class="face left">3</div>
  <div class="face top">2</div>
  <div class="face bottom">5</div>
</div>

CSS样式

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

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

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

@keyframes rotate {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

简化版2D骰子

若只需展示单面骰子，可使用CSS伪元素和flexbox布局点数：

<div class="dice-2d" data-value="3"></div>

.dice-2d {
  width: 100px;
  height: 100px;
  background: white;
  border: 2px solid black;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

.dice-2d::before,
.dice-2d::after {
  content: "";
  align-self: center;
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
}

/* 根据data-value调整点数 */
.dice-2d[data-value="1"]::before { display: none; }
.dice-2d[data-value="1"]::after { align-self: center; }

点数布局逻辑

骰子点数排列遵循传统规则：

• 1点：居中
• 2点：对角分布
• 3点：对角加中心
• 4点：四角分布
• 5点：四角加中心
• 6点：分两排三列

可通过CSS选择器为不同面定制样式：

.dice .front[data-value="4"]::before,
.dice .front[data-value="4"]::after {
  /* 自定义4点的伪元素位置 */
}