css制作筛子

CSS制作筛子（骰子）

使用CSS可以创建3D效果的筛子，通过HTML结构和CSS样式实现六个面的骰子效果。

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

关键点说明

3D空间设置 通过transform-style: preserve-3d让子元素保留3D变换效果，父容器需要设置透视效果。

骰子面定位 每个面通过transform属性进行3D定位，translateZ(50px)将面向前移动半个骰子的宽度。

点数排列 可以调整每个面内部元素的布局，使用flexbox或grid布局精确控制点的位置。

动画效果 通过@keyframes创建旋转动画，使骰子自动旋转展示各个面。

响应式调整

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

浏览器兼容性

对于旧版浏览器需要添加前缀：

-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(0deg) rotateY(0deg);

这种方法创建的骰子具有完整的3D效果，可以通过CSS控制展示任意点数组合。