当前位置：首页 > CSS

css怎么制作骰子

2026-01-28 12:19:04CSS

使用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样式

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: 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); }
}

骰子点数样式优化

为骰子点数添加更专业的样式，可以使用伪元素或flex布局：

.face {
  /* 基础样式同上 */
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;
}

/* 点数样式 */
.face::before {
  content: "";
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
}

/* 不同面的点数布局 */
.front::before {
  margin: auto;
}

.back::before {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* 其他面的点数布局类似实现 */

响应式调整

使骰子大小可随容器调整：

css怎么制作骰子

.dice {
  width: 20vmin;
  height: 20vmin;
}

.face {
  font-size: 5vmin;
}

交互效果

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

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

兼容性处理

对于不支持3D变换的浏览器提供降级方案：

@supports not (transform-style: preserve-3d) {
  .dice {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    height: 200px;
  }
  .face {
    position: static;
    width: 100px;
    height: 100px;
    transform: none !important;
  }
}

这种方法创建的骰子具有完整的3D效果，可以通过调整transform属性实现不同角度的展示。点数布局可以根据实际需求通过CSS Grid或Flexbox精细调整。