css怎么制作骰子

使用CSS制作骰子

通过CSS的transform属性和伪元素可以创建一个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(45deg) rotateY(45deg);
  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: 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 rotate {
  from { transform: rotateX(0) rotateY(0); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

骰子点数样式优化

为每个面添加圆点样式，通过伪元素或Flex布局实现：

.face {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}

/* 单点样式（1点） */
.front::before {
  content: "";
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
}

/* 多点布局示例（4点） */
.right {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.right::before, .right::after,
.right span::before, .right span::after {
  content: "";
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
}

响应式调整

通过媒体查询调整骰子大小：

@media (max-width: 600px) {
  .dice {
    width: 60px;
    height: 60px;
  }
  .face {
    font-size: 16px;
  }
}

交互效果

添加悬停暂停动画：

.dice:hover {
  animation-play-state: paused;
}

完整实现会得到一个可旋转的3D骰子，每个面显示对应的点数。通过调整transform属性可以改变初始旋转角度，修改animation属性可控制旋转速度和方向。