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

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

骰子点数布局

每个面的点数可以通过伪元素或额外元素实现：

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

/* 根据不同面调整点数位置 */
.front::before { /* 单点居中 */ }
.back::before, 
.back::after { /* 两点对角 */ }
/* 其他面类似 */

静态骰子实现

不需要动画的简单版本：

.dice {
  transform: rotateX(30deg) rotateY(30deg);
  animation: none;
}

响应式调整

通过CSS变量控制骰子大小：

:root {
  --dice-size: 100px;
}

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

.face {
  transform: translateZ(calc(var(--dice-size)/2));
}

浏览器兼容性

现代浏览器都支持这些CSS特性，对于旧版浏览器可以添加前缀：

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;