css3制作正方体

CSS3 制作正方体

使用 CSS3 的 3D 变换和透视功能可以创建一个正方体效果。以下是实现步骤：

HTML 结构

<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>

CSS 样式

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(20deg) rotateY(30deg);
  animation: rotate 5s infinite linear;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  border: 2px solid black;
}

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

.back {
  background: blue;
  transform: translateZ(-100px);
}

.left {
  background: green;
  transform: rotateY(-90deg) translateZ(100px);
}

.right {
  background: yellow;
  transform: rotateY(90deg) translateZ(100px);
}

.top {
  background: purple;
  transform: rotateX(90deg) translateZ(100px);
}

.bottom {
  background: orange;
  transform: rotateX(-90deg) translateZ(100px);
}

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

关键点说明

透视和 3D 空间

• 父容器需要设置 transform-style: preserve-3d 来保持子元素的 3D 效果
• 初始旋转角度让立方体以一定角度展示

六个面的定位

• 每个面都是绝对定位
• 使用 translateZ 控制前后位置
• 使用 rotateX 和 rotateY 控制面的朝向

动画效果

• 添加 rotate 动画让立方体自动旋转
• 动画时长和类型可调整

浏览器兼容性

• 现代浏览器都支持 CSS3 3D 变换
• 旧版浏览器可能需要前缀（如 -webkit-transform）
• 移动设备上性能表现良好

通过调整尺寸、颜色和变换参数，可以创建不同大小和风格的正方体效果。