css制作筛子

CSS制作筛子（骰子）

使用CSS可以轻松创建一个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样式

关键样式实现3D变换和骰子点数布局：

.dice {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 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: 2rem;
}

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

点数样式优化

为每个面添加不同的点数布局：

/* 1点 */
.front::before { content: "•"; }

/* 6点 */
.back::before {
  content: "• • •";
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 4点 */
.right::before {
  content: "";
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.right::after {
  content: "• • • •";
}

/* 3点 */
.left::before {
  content: "• • •";
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 2点 */
.top::before {
  content: "• •";
  display: flex;
  justify-content: space-between;
}

/* 5点 */
.bottom::before {
  content: "";
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  width: 60%;
  height: 60%;
}
.bottom::after {
  content: "• • • • •";
}

交互效果

添加悬停暂停动画：

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

这个实现包含了完整的3D骰子效果，通过CSS 3D变换创建六个面，每个面显示不同的点数布局，并添加旋转动画展示3D效果。可以根据需要调整大小、颜色和动画速度等参数。