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;
