CSS 变换生成器
指导
CSS 变换生成器
使用实时预览直观地构建CSS变换属性。调整2D和3D变换滑块以实现旋转、缩放、倾斜、位移和透视，然后复制代码。包含一个变换原点网格选择器、动画预览切换以及用于翻转和倾斜等常见效果的一键式预设。
如何使用
拖动滑块可调整每个变换属性，并实时查看应用到预览元素的效果。使用2D部分进行旋转、缩放、倾斜和位移。切换到3D部分进行rotateX、rotateY、rotateZ和透视。单击变换原点网格中的任意单元格可更改旋转中心点。尝试使用预设以获得快速效果，或切换动画预览以查看变换循环动画。满意结果后，复制生成的CSS。
特征
- 实时可视化预览 – 调整滑块时，即时查看变换应用到演示元素的效果
- 2D变换 – 使用精确的滑块控件旋转、缩放X/Y、倾斜X/Y和位移X/Y
- 3D变换 – 使用rotateX、rotateY、rotateZ和透视实现深度效果
- 变换原点网格 – 可视化的3×3网格选择器，用于设置旋转中心点，以及自定义百分比输入
- 预设 – 一键式效果：水平翻转、垂直翻转、左倾斜、右倾斜、3D卡片翻转、弹出
- 动画预览 – 切换以查看变换在循环中平滑动画，并带有CSS过渡效果
- 简洁的CSS输出 – 合并的变换字符串，包含变换原点和可选的厂商前缀
- 重置所有 – 一键将所有滑块恢复到默认值
常问问题
-
2D和3D CSS变换之间有什么区别？
2D变换仅在X和Y轴上操作，影响宽度和高度尺寸。它们包括旋转、缩放、倾斜和位移。3D变换增加了Z轴以实现深度，使元素看起来能在三维空间中旋转。rotateX和rotateY等属性使元素向观察者倾斜或远离观察者。3D变换需要父元素或元素上的perspective值来创建深度感。没有透视，3D旋转看起来是平面的。2D和3D变换都可以在单个transform属性中组合。
-
transform-origin的作用是什么？
transform-origin设置应用变换的点。默认情况下，它是元素的中心（50% 50%）。将其更改为左上角（0% 0%）将使旋转从角落而不是中心枢轴。这会极大地改变rotate、scale和skew的外观。例如，从中心旋转45度会在原地旋转元素，但从左上角旋转会像门一样将其摆动。原点接受关键字（top、center、bottom、left、right）、百分比或像素值以进行精确控制。
-
CSS perspective是如何工作的？
Perspective定义了观察者与Z平面之间的距离，为3D变换创建深度感。较小的值，如200px，会创建极端的特写透视，使3D效果看起来戏剧化且失真。较大的值，如2000px，会创建微妙的远景透视。Perspective可以作为属性（perspective: 800px）设置在父元素上，或作为变换函数（transform: perspective(800px)）设置在元素本身上。当多个子元素共享同一3D空间时，首选父方法。
-
我还需要CSS变换的厂商前缀吗？
在2026年，CSS变换的厂商前缀很少需要了。 unprefixed transform属性在所有现代浏览器中都得到支持，包括Chrome、Firefox、Safari、Edge和移动浏览器。-webkit-transform前缀在Safari 9（2015年）之前的旧Safari和iOS版本是必需的。如果您需要支持非常旧的浏览器，此生成器可以在输出中包含厂商前缀作为注释。对于大多数面向当前浏览器的项目，unprefixed版本就足够了，并且没有前缀的代码更简洁。
