如何使用 CSS 创建一个具有 3D 效果的立方体？

要实现一个有3D效果的立方体，需要HTML结构创建六个面并使用CSS的3D变换属性。核心步骤包括：

一、HTML结构
创建一个外部容器来定义透视（perspective），一个立方体容器包裹六个面，代表不同方向的面：

<div class="container">
  <div class="cube">
    <div class="front">前</div>
    <div class="back">后</div>
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="top">上</div>
    <div class="bottom">下</div>
  </div>
</div>

二、基本CSS设置
在外部容器设置透视距离 perspective（建议800px至1200px避免变形），并在立方体容器启用 3D 保留效果 transform - style : preserve - 3d：

.container {
  perspective: 1200px;
  margin: 0 auto;
  /* 中心对齐 */
}
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d; 
  /* 启用3D效果 */
}
.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid #333;
  background: rgba(255, 0, 0, 0.5); 
  /* 带透明背景便于调试 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

三、三维变换调整每个面位置
利用 transform 属性组合 rotateX、rotateY 或 translateZ 移动每个面的 Z 轴或旋转：

.front { transform: translateZ(100px); }   /* 正面：向前移动100px */
.back { transform: rotateY(180deg) translateZ(100px); } /* 背面：绕Y轴旋转180度后移动 */
.left { transform: rotateY(-90deg) translateX(-100px); } /* 左侧：绕Y轴逆时针旋转90度 */
.right { transform: rotateY(90deg) translateX(100px); } /* 右侧：绕Y轴顺时针旋转90度 */
.top { transform: rotateX(90deg) translateZ(100px); }    /* 上面：绕X轴逆时针90度 */
.bottom { transform: rotateX(-90deg) translateZ(100px); } /* 下面：绕X轴顺时针90度 */

四、添加旋转动画（可选增强效果）
可以使用 @keyframes 创建无限循环旋转动画：

@keyframes spin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.cube:hover {
  animation: spin 5s linear infinite;
  /* 鼠标悬浮时启动动画 */
}

关键注意事项：

• 透视原点： perspective - origin : center center; 可设置在容器中以调整视角。
• 浏览器前缀：为兼容性添加 -webkit - transform-style等。
• 调试技巧：初始阶段给每个面设置不同颜色方便位置校正。完成时可渐淡处理。

这样效果可在 现代浏览器渲染完整3D立方体。测试完整代码如下。