css怎么制作骰子
使用CSS制作骰子
通过CSS的transform属性和伪元素可以创建一个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;
transform: rotateX(45deg) rotateY(45deg);
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: translateZ(50px); }
.back { transform: 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); }
}骰子点数样式优化
为每个面添加圆点样式，通过伪元素或Flex布局实现：
.face {
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px;
}
/* 单点样式（1点） */
.front::before {
content: "";
width: 20px;
height: 20px;
background: black;
border-radius: 50%;
}
/* 多点布局示例（4点） */
.right {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.right::before, .right::after,
.right span::before, .right span::after {
content: "";
width: 20px;
height: 20px;
background: black;
border-radius: 50%;
}响应式调整
通过媒体查询调整骰子大小：
@media (max-width: 600px) {
.dice {
width: 60px;
height: 60px;
}
.face {
font-size: 16px;
}
}交互效果
添加悬停暂停动画：
.dice:hover {
animation-play-state: paused;
}完整实现会得到一个可旋转的3D骰子，每个面显示对应的点数。通过调整transform属性可以改变初始旋转角度，修改animation属性可控制旋转速度和方向。
