CSS3制作3D
CSS3 3D 转换基础
CSS3 的 3D 效果通过 transform 属性实现，需结合以下关键属性：
transform-style: preserve-3d：声明父容器为 3D 空间，子元素可进行 3D 变换。perspective：设置观察者与 3D 元素的视距（单位：像素），值越小透视感越强。transform：使用rotateX(),rotateY(),rotateZ(),translate3d()等函数控制元素在 3D 空间中的位置和角度。
.container {
perspective: 1000px;
transform-style: preserve-3d;
}
.box {
transform: rotateY(45deg) translateZ(100px);
}3D 立方体实现示例
通过 6 个面组合成立方体，每个面使用 translateZ 调整深度位置：
<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>.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(30deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.8;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) 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 添加动画效果，或结合 JavaScript 实现交互式旋转：
.cube {
transition: transform 1s;
}
.cube:hover {
transform: rotateX(180deg) rotateY(360deg);
}性能优化注意事项
- 避免过度使用
box-shadow和filter，可能影响渲染性能。 - 对静态 3D 元素使用
will-change: transform提示浏览器优化。 - 优先使用
translate3d()而非translate()以启用硬件加速。
通过合理组合这些技术，可创建复杂的 3D 场景如卡片翻转、3D 菜单等效果。
