CSS 3D卡片

CSS 3D 变换（Transform）允许在三维空间中对元素进行旋转、缩放、移动和倾斜。通过 perspective 属性设置观察者到 z=0 平面的距离，产生近大远小的透视效果，使 3D 变换更加真实。

perspective定义透视距离，值越小透视效果越强烈（变形越夸张），值越大越接近平面投影。建议范围：600px - 1500px。

rotateX / rotateY / rotateZ分别对 X 轴（水平翻转）、Y 轴（左右翻转）、Z 轴（平面旋转）旋转。角度单位为度（deg），正负方向遵循右手定则。

transform-style: preserve-3d使子元素保留 3D 位置，构建多层立体结构时必须设置。配各translateZ 可创建真正具有厚度的立方体效果。

box-shadow通过偏移量、模糊半径和颜色模拟卡片阴影，增强立体悬浮感。3D 变换时阴影会跟随元素倾斜，营造真实光照效果。

使用方法拖动滑块调节各项参数，实时预览效果；按住预览卡片拖拽可自由旋转；复制生成的CSS 代码即可直接应用于项目。