CSS3制作3D
CSS3 3D 变换基础
CSS3 的 transform 属性支持 3D 变换，通过以下关键属性实现：
rotateX()、rotateY()、rotateZ()：绕 X/Y/Z 轴旋转。translateZ()：沿 Z 轴移动（控制深度）。scale3d()：三维缩放。perspective：设置透视距离（数值越小，透视效果越强）。
示例代码：
.box {
transform: rotateX(45deg) rotateY(30deg) translateZ(50px);
perspective: 1000px;
}3D 容器与子元素
父容器需设置 transform-style: preserve-3d 以保留子元素的 3D 效果，否则子元素会被压平到 2D 平面。
示例：
.container {
transform-style: preserve-3d;
perspective: 500px;
}
.child {
transform: rotateY(60deg) translateZ(100px);
}创建 3D 立方体
通过 6 个面组合实现立方体，每个面通过 translateZ 控制位置。
关键代码：
.cube {
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(30deg);
}
.face {
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
}
.front { transform: translateZ(100px); }
.back { transform: translateZ(-100px); }
/* 其他面类似，调整 translateX/Y/Z */动画与交互
结合 @keyframes 和 transition 实现动态 3D 效果。
旋转动画示例：
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
.cube {
animation: spin 5s infinite linear;
}性能优化
- 避免频繁触发重绘，使用
will-change: transform提示浏览器优化。 - 优先使用
transform和opacity，这两个属性可通过 GPU 加速。
兼容性提示：
部分旧浏览器需前缀（如 -webkit-transform），建议通过工具自动添加。
通过以上方法，可以灵活实现卡片翻转、3D 轮播等效果。
