当前位置：首页 > CSS

CSS3制作3D

2026-01-08 20:32:12CSS

CSS3 3D 变换基础

CSS3 提供了强大的 3D 变换功能，主要通过 transform 属性实现。核心属性包括 rotateX(), rotateY(), rotateZ(), translateZ(), 以及 perspective。

.box {
  transform: rotateX(45deg) rotateY(30deg);
  perspective: 1000px;
}

创建 3D 容器

需要为父元素设置 transform-style: preserve-3d 才能使子元素在 3D 空间中正确呈现。

.container {
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
}

透视效果

perspective 属性决定 3D 元素的透视效果。值越小，透视效果越强。

.scene {
  perspective: 500px;
}

3D 立方体示例

创建一个简单的 3D 立方体需要六个面，每个面通过 translateZ 定位。

.cube {
  position: relative;
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
}

.front { transform: translateZ(50px); }
.back { transform: 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 spin {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}

3D 翻转卡片

通过 rotateY 实现卡片翻转效果，配合 backface-visibility 控制背面可见性。

.card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card:hover {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

性能优化建议

使用 will-change 属性提前告知浏览器元素将发生 3D 变换，提升渲染性能。

.optimized {
  will-change: transform;
}

浏览器兼容性

现代浏览器基本支持 CSS3 3D 变换，但需要添加前缀以确保兼容性。可使用 Autoprefixer 等工具自动处理。

-webkit-transform: rotateY(45deg);
-moz-transform: rotateY(45deg);
-ms-transform: rotateY(45deg);
-o-transform: rotateY(45deg);
transform: rotateY(45deg);

CSS3制作3D