CSS 变换（transform）生成器

生成 CSS transform 值：平移、旋转、缩放、倾斜，以及 3D 透视、rotateX/rotateY 和 translateZ，并支持 transform-origin 和实时预览。

预设

2D 变换

X 方向移动px

Y 方向移动px

旋转deg

X 方向缩放

Y 方向缩放

X 方向倾斜deg

Y 方向倾斜deg

3D 变换

透视px

绕 X 轴旋转（俯仰）deg

绕 Y 轴旋转（转向）deg

Z 方向移动（深度）px

透视为 0 表示不使用。没有透视时 3D 旋转看起来是平的。

变换原点

X 位置%

Y 位置%

预览

虚线框表示变换前的元素，红点为变换原点。

CSS 代码

transform: none;

什么是 CSS 变换生成器？

用滑块组合 CSS transform 函数：2D 的平移、旋转、缩放和倾斜，以及 3D 的 perspective、rotateX、rotateY 和 translateZ。预览中的虚线轮廓显示原始位置，红点标出变换原点。

如何使用 CSS 变换生成器

选择预设（3D 倾斜、翻转、倾斜、放大、3D 卡片），或从“无”开始。
在“2D 变换”下调整“X 方向移动/Y 方向移动”、“旋转”、“X 方向缩放/Y 方向缩放”和“X 方向倾斜/Y 方向倾斜”。
在“3D 变换”下设置“透视”“绕 X 轴旋转（俯仰）”“绕 Y 轴旋转（转向）”和“Z 方向移动（深度）”。
从列表中选择“变换原点”，或设置“X 位置”/“Y 位置”。
复制 CSS 代码。

示例

输入

Move X 20px, Rotate 45°, Scale X 1.5, Scale Y 1.5

输出

transform: translate(20px, 0) rotate(45deg) scale(1.5);

这是对 X 方向移动 20px、旋转 45°、缩放 1.5 倍的组合。

何时使用 CSS 变换生成器

适合悬停效果、卡片翻转、倾斜的 3D 展示和精确的位置偏移。变换不会影响布局（周围的元素不会移动）；要改变布局，请使用外边距、Flexbox 或 Grid。可结合 CSS 动画生成器在不同变换之间制作动画。

CSS 变换生成器的工作原理

只有非中性的函数才会被写入，顺序为：perspective()、translate()、translateZ()、rotateX()、rotateY()、rotate()、scale()、skew()。变换相对于元素从右向左应用，所以顺序会改变结果；perspective() 必须放在最前面，才能影响其后的 3D 函数。X/Y 缩放相同时写成单个 scale(n)。只有当 transform-origin 与默认的中心（50% 50%）不同时才会输出。