css3制作正方体

使用 CSS3 制作正方体

通过 CSS3 的 transform 和 perspective 属性，可以创建一个 3D 正方体效果。以下是实现步骤和代码示例：

HTML 结构

<div class="cube-container">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face left">Left</div>
    <div class="face right">Right</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>

CSS 样式

.cube-container {
  width: 200px;
  height: 200px;
  perspective: 1000px;
  margin: 50px auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  background-color: rgba(0, 0, 255, 0.5);
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

.top {
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

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

关键点说明

• perspective 属性为父容器设置 3D 透视效果，值越小透视效果越强。
• transform-style: preserve-3d 确保子元素保持 3D 变换。
• 每个面通过 translate 和 rotate 组合定位到正确位置。
• 正方体边长为 200px，因此每个面沿 Z 轴移动 100px（边长的一半）。
• 添加 animation 使正方体自动旋转，便于观察效果。

自定义调整

• 修改 cube-container 的 width 和 height 可调整正方体大小。
• 调整 perspective 值改变 3D 视觉效果。
• 修改 background-color 和 border 自定义外观。