css怎么制作骰子
使用CSS制作骰子
通过CSS的transform和flexbox可以创建一个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;
}
.front { transform: rotateY(0deg) 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); }
}简化版2D骰子
若只需展示单面骰子，可使用CSS伪元素和flexbox布局点数：
<div class="dice-2d" data-value="3"></div>.dice-2d {
width: 100px;
height: 100px;
background: white;
border: 2px solid black;
border-radius: 10px;
display: flex;
justify-content: space-around;
padding: 10px;
}
.dice-2d::before,
.dice-2d::after {
content: "";
align-self: center;
width: 20px;
height: 20px;
background: black;
border-radius: 50%;
}
/* 根据data-value调整点数 */
.dice-2d[data-value="1"]::before { display: none; }
.dice-2d[data-value="1"]::after { align-self: center; }点数布局逻辑
骰子点数排列遵循传统规则：
- 1点：居中
- 2点：对角分布
- 3点：对角加中心
- 4点：四角分布
- 5点：四角加中心
- 6点：分两排三列
可通过CSS选择器为不同面定制样式：
.dice .front[data-value="4"]::before,
.dice .front[data-value="4"]::after {
/* 自定义4点的伪元素位置 */
}
