当前位置：首页 > CSS

css制作骰子

2026-03-11 15:41:58CSS

使用CSS制作骰子

通过CSS的伪元素、变换和Flexbox布局可以创建一个3D骰子效果。以下是实现方法：

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;
  transform: rotateX(15deg) rotateY(15deg);
  animation: spin 5s infinite linear;
}

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

.front  { transform: 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 spin {
  from { transform: rotateX(0) rotateY(0); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}

点状骰子样式

如需传统点状骰子，可修改CSS如下：

css制作骰子

.face {
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #000;
  align-self: center;
  justify-self: center;
}

/* 为每个面配置不同的点数布局 */
.front .dot:nth-child(1) { grid-area: 2 / 2; }
.back  .dot { grid-area: 1 / 1, 2 / 2, 3 / 3; }
/* 其他面的点布局类似调整 */