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