CSS3制作3D

CSS3 3D 变换基础

CSS3 提供了 transform 属性来实现 3D 效果，核心属性包括 rotateX()、rotateY()、rotateZ()、translateZ() 和 perspective。perspective 定义观察者与 3D 空间的视距，值越小透视感越强。

.container {
  perspective: 1000px; /* 视距 */
}
.box {
  transform: rotateX(45deg) rotateY(30deg) translateZ(50px);
}

3D 空间容器设置

使用 transform-style: preserve-3d 让子元素在 3D 空间内渲染，而非平面投影。需注意该属性需设置在父容器上。

.parent {
  transform-style: preserve-3d;
}
.child {
  transform: rotateY(60deg);
}

制作 3D 立方体

通过 6 个面（前、后、左、右、上、下）组合，结合 translateZ 调整位置：

.cube {
  position: relative;
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
.front { transform: translateZ(100px); }
.back { transform: translateZ(-100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

动画与交互

通过 transition 或 @keyframes 实现动态 3D 效果。例如悬停旋转：

.cube {
  transition: transform 1s;
}
.cube:hover {
  transform: rotateY(180deg);
}

或使用动画关键帧：

@keyframes spin {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}
.cube {
  animation: spin 5s infinite linear;
}

性能优化建议

避免频繁触发重绘，优先使用 transform 和 opacity。硬件加速可通过 will-change 提示浏览器：

.element {
  will-change: transform;
}

浏览器兼容性

需前缀支持旧版浏览器（如 -webkit-transform）。可通过工具自动添加前缀，或使用 PostCSS 等方案。测试时需覆盖主流浏览器（Chrome、Firefox、Safari）。