css骰子制作

2026-01-28 00:52:47CSS

使用CSS制作3D骰子

通过CSS的transform和animation属性可以创建一个3D骰子效果。以下代码展示了如何实现一个六面骰子：

css骰子制作

<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;
  animation: spin 5s infinite linear;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background: rgba(255, 255, 255, 0.9);
}

.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); }
}

制作2D骰子动画

如果需要更简单的2D骰子动画效果，可以使用CSS关键帧动画：

css骰子制作

.dice-2d {
  width: 100px;
  height: 100px;
  background: white;
  border: 2px solid black;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  animation: roll 2s infinite;
}

@keyframes roll {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

添加骰子点数样式

可以通过伪元素或flex布局来创建骰子点数图案：

.face::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
}

/* 根据不同面数调整点数位置 */
.front::before { /* 1点 */ }
.back::before { 
  /* 6点布局 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

响应式骰子设计

使用CSS变量和vw单位可以使骰子大小适应不同屏幕：

:root {
  --dice-size: min(15vw, 100px);
}

.dice {
  width: var(--dice-size);
  height: var(--dice-size);
}

.face {
  font-size: calc(var(--dice-size) * 0.24);
}

这些方法提供了从简单到复杂的CSS骰子实现方案，可以根据项目需求选择合适的实现方式。3D效果需要浏览器支持CSS 3D变换，而2D版本兼容性更好。