CSS3制作3D
3D 变换基础
CSS3 通过 transform 属性实现 3D 效果，需结合 perspective（透视）和 transform-style（3D 空间）属性。
关键属性：
transform: 支持rotateX(),rotateY(),rotateZ(),translateZ()等 3D 函数。perspective: 定义观察者与 3D 元素的视距（单位：像素），值越小透视感越强。transform-style: preserve-3d: 确保子元素在 3D 空间内渲染。
实现步骤
设置透视和 3D 空间
在父容器上定义透视和 3D 空间：
.container {
perspective: 1000px;
transform-style: preserve-3d;
}创建 3D 元素
为子元素添加 3D 变换，例如绕 Y 轴旋转：
.box {
transform: rotateY(45deg);
background: #3498db;
width: 200px;
height: 200px;
}添加交互效果
通过悬停或动画增强 3D 效果：
.box:hover {
transform: rotateY(180deg) translateZ(50px);
transition: transform 0.5s ease;
}进阶技巧
多层 3D 嵌套
在子元素中嵌套多个 3D 层，需确保每层都设置 transform-style: preserve-3d。
动画关键帧
使用 @keyframes 创建复杂 3D 动画：
@keyframes spin {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
.box {
animation: spin 5s infinite linear;
}注意事项
- 浏览器兼容性：部分旧版本浏览器需前缀（如
-webkit-transform）。 - 性能优化：避免过度使用 3D 变换，可能导致渲染性能下降。
通过组合透视、变换和动画，CSS3 能实现丰富的 3D 视觉效果，适用于卡片翻转、立方体旋转等场景。
