CSS变换

CSS Transform 属性允许你对元素进行位移、旋转、缩放、倾斜等二维或三维变换，且不会影响文档流中其他元素的布局。

translate：位移变换。translate(x, y) 在 X/Y 轴移动；translateZ(z) 沿 Z 轴前后移动（需配合 perspective）。也可用 translateX()、translateY() 单独设置。

rotate：旋转变换。rotate(deg) 绕 Z 轴旋转（2D）；rotateX/Y/Z(deg) 分别绕对应轴旋转（3D）。正值顺时针，负值逆时针。

scale：缩放变换。scale(x, y) 分别设置 X/Y 轴缩放比例，1 为原始大小。小于 1 缩小，大于 1 放大。也可用 scaleX()、scaleY() 单独控制。

skew：倾斜变换。skew(x, y) 沿 X/Y 轴倾斜元素。单位为角度 deg，会产生平行四边形效果。

transform-origin：设置变换的原点位置。默认 50% 50%（中心）。可设为 top left、center bottom 或具体像素/百分比。

perspective：定义 3D 变换的透视效果。值越小透视越强（近大远小越明显），值越大越接近平行投影。设置在父容器上时影响所有子元素的 3D 变换。

变换顺序：transform 按从右到左的顺序应用。如 translate(50px) rotate(45deg) 先旋转再位移，与 rotate(45deg) translate(50px) 结果不同。

预设方案：提供翻转（scaleX(-1)）、3D倾斜（rotateY+perspective）、放大（scale(1.5)）、旋转（rotate(45deg)）、倾斜（skew(15deg)）、卡片翻转（rotateY(180deg)）六种预设。