当前位置：首页 > CSS

css骰子制作

2026-04-01 03:23:32CSS

CSS骰子制作方法

使用CSS和HTML可以创建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样式

关键CSS代码实现3D效果：

.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: translateZ(50px); }
.back { transform: translateZ(-50px) rotateY(180deg); }
.right { transform: translateX(50px) rotateY(90deg); }
.left { transform: translateX(-50px) rotateY(-90deg); }
.top { transform: translateY(-50px) rotateX(90deg); }
.bottom { transform: translateY(50px) rotateX(-90deg); }

@keyframes rotate {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to { transform: rotateX(360deg) rotateY(360deg); }
}

点数的样式优化

为骰子点数添加CSS样式：

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

/* 根据不同面调整点数位置 */
.front::before { /* 1点 */ }
.back::before { /* 6点 */ transform: translate(0,0); }
/* 其他面的点数样式需要单独调整 */

交互效果

添加悬停暂停动画的效果：

.dice:hover {
  animation-play-state: paused;
}

响应式调整

使骰子大小可调整：

css骰子制作

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

.face {
  transform: translateZ(calc(var(--size)/2));
}
/* 其他面的translate值也需要相应调整 */

通过以上代码可以实现一个具有3D旋转效果的CSS骰子。可以根据需要调整大小、颜色和动画速度等参数。