当前位置：首页 > CSS

css骰子制作

2026-02-27 03:59:33CSS

使用CSS制作骰子

通过CSS的3D变换和伪元素可以模拟骰子的六个面。以下是一个基础实现方案：

<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>

.dice {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(45deg);
  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;
}

.front { transform: translateZ(50px); }
.back { transform: 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); }
}

添加圆点样式的骰子

更真实的骰子需要圆点布局：

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

/* 示例：1点的中心圆点 */
.face.front .dot {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 示例：6点的三列布局 */
.face.back .dot {
  width: 12px;
  height: 12px;
}
.face.back .dot:nth-child(1) { top: 15%; left: 25%; }
.face.back .dot:nth-child(2) { top: 15%; left: 50%; }
.face.back .dot:nth-child(3) { top: 15%; left: 75%; }
.face.back .dot:nth-child(4) { top: 85%; left: 25%; }
.face.back .dot:nth-child(5) { top: 85%; left: 50%; }
.face.back .dot:nth-child(6) { top: 85%; left: 75%; }

交互式骰子动画

添加点击旋转效果：

document.querySelector('.dice').addEventListener('click', function() {
  const x = Math.floor(Math.random() * 360);
  const y = Math.floor(Math.random() * 360);
  this.style.transform = `rotateX(${x}deg) rotateY(${y}deg)`;
});

响应式尺寸调整

通过CSS变量实现尺寸控制：

:root {
  --dice-size: 100px;
  --dot-size: calc(var(--dice-size) * 0.15);
}

@media (max-width: 600px) {
  :root {
    --dice-size: 60px;
  }
}

高级3D阴影效果

增强立体感的box-shadow：

.dice {
  box-shadow: 
    5px 5px 10px rgba(0,0,0,0.2),
    inset 2px 2px 5px rgba(255,255,255,0.8);
}

.face {
  box-shadow: 
    inset 0 0 15px rgba(0,0,0,0.1),
    0 0 2px rgba(0,0,0,0.1);
}

这些方法组合可以创建出从简单到复杂的CSS骰子效果，通过调整transform参数可以实现不同的旋转状态展示特定点数。

css骰子制作