css制作骰子
使用CSS制作骰子
通过CSS的transform和flexbox可以轻松实现骰子的3D效果和点数布局。以下是一个完整的实现方法：
骰子容器与3D效果
.dice {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
animation: spin 5s infinite linear;
}骰子六个面
每个面使用绝对定位并通过transform设置空间位置：
.face {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid #000;
border-radius: 10px;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.front { transform: translateZ(50px); }
.back { transform: translateZ(-50px); }
.right { transform: translateX(50px) rotateY(90deg); }
.left { transform: translateX(-50px) rotateY(-90deg); }
.top { transform: translateY(-50px) rotateX(90deg); }
.bottom { transform: translateY(50px) rotateX(-90deg); }点数样式
使用伪元素创建圆点：
.dot {
width: 15px;
height: 15px;
background: black;
border-radius: 50%;
position: absolute;
}
/* 示例：4点的布局 */
.face-4 .dot:nth-child(1) { top: 20%; left: 20%; }
.face-4 .dot:nth-child(2) { top: 20%; right: 20%; }
.face-4 .dot:nth-child(3) { bottom: 20%; left: 20%; }
.face-4 .dot:nth-child(4) { bottom: 20%; right: 20%; }旋转动画
@keyframes spin {
0% { transform: rotateX(0) rotateY(0); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}HTML结构
<div class="dice">
<div class="face front face-1">
<span class="dot"></span>
</div>
<div class="face back face-6">
<!-- 6个点 -->
</div>
<!-- 其他4个面 -->
</div>关键技巧
- 使用
transform-style: preserve-3d保持3D空间 - 通过不同的
rotate和translate组合定位六个面 - 圆点布局遵循真实骰子的对称排列规则
- 调整
perspective属性可以改变3D视角强度
完整实现需要为每个面（1-6点）分别定义圆点位置，通常：
- 1点：中心
- 2点：对角线
- 3点：对角线加中心
- 4点：四个角
- 5点：四个角加中心
- 6点：两列对称分布
