📌 什么是3D转换？

CSS3 3D转换允许你在三维空间中操作HTML元素，就像它们是真实的三维物体一样。你可以旋转、缩放、移动元素，创建卡片翻转、立方体、3D画廊等炫酷效果。

🧩 核心概念：

1. 3D坐标系：想象网页是一个三维空间，有X轴(左右)、Y轴(上下)、Z轴(前后)

2. 变换函数：告诉元素如何移动或变形

3. 透视(perspective)：创建景深效果，让物体近大远小

4. 3D容器：设置父元素为3D空间

🚀 什么是平移？

平移就是将元素在3D空间中沿着X、Y或Z轴移动位置。想象它就像在桌子上滑动一个盒子。

🔧 常用函数：

translateX(50px) – 沿X轴（水平）移动
translateY(-30px) – 沿Y轴（垂直）移动
translateZ(100px) – 沿Z轴（深度）移动
translate3d(20px, 30px, 40px) – 同时沿三个方向移动

🔄 什么是旋转？

旋转就是让元素围绕某个轴转动。想象旋转一个魔方或拧开瓶盖的动作。

🔧 常用函数：

rotateX(45deg) – 绕X轴旋转（像翻跟头）
rotateY(30deg) – 绕Y轴旋转（像旋转门）
rotateZ(15deg) – 绕Z轴旋转（像钟表指针）
rotate3d(1, 1, 0, 45deg) – 自定义轴旋转

👓 什么是透视？

透视是创建3D视觉效果的关键。它模拟人眼观察物体的方式：近处的物体看起来大，远处的物体看起来小。

🔧 两种使用方式：

1. 在父元素上使用：perspective: 800px;
2. 在变换函数中：transform: perspective(800px) rotateX(45deg);

📏 透视值：

透视值越小（如200px），3D效果越夸张（类似广角镜头）
透视值越大（如2000px），3D效果越平缓（类似长焦镜头）

📦 什么是3D容器？

当你想要一个元素内的子元素也参与3D变换时，需要使用transform-style: preserve-3d。这会让子元素保留在3D空间而不是被压平到2D平面。

❌ 默认值： transform-style: flat（子元素被压平）

✅ 3D模式： transform-style: preserve-3d（保留3D空间）

👁️ 什么是背面？

在3D空间中，每个元素都有正面和背面。默认情况下，当元素旋转180度后，你会看到它的背面。

⚙️ 属性值：

backface-visibility: visible; – 显示背面（默认值）
backface-visibility: hidden; – 隐藏背面

💡 为什么需要隐藏背面？

在创建卡片翻转效果时，我们通常希望当卡片翻转到背面时，正面不可见（隐藏），反之亦然。