CSS 变换生成器
生成 CSS transform 声明，将 translate、rotate、scale 和 skew 组合为一个现成的速记。
输入
输出
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-transform-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"translateX": "10",
"translateY": "20",
"rotate": "45",
"scaleX": "1.5",
"scaleY": "1.5",
"skewX": "0",
"skewY": "0"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-transform-generator` tool (CSS Transform Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-transform-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 变换生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
功能
CSS 变换生成器将 translate、rotate、scale 和 skew 值组合为单个现成的 transform: 声明。调整滑块和数字字段，生成的 CSS 会立即更新 — 无需手写函数语法或记住 CSS 期望的顺序。
变换函数
CSS transform 声明是以空格分隔的函数列表，每个函数以不同的方式改变元素：
translate(x, y)— 在水平和垂直方向上以像素为单位移动元素。正 X 值向右移动，正 Y 值向下移动。rotate(deg)— 围绕其原点（默认情况下为中心）顺时针旋转元素。负值逆时针旋转。scale(x, y)— 沿每个轴调整元素大小。1是原始大小，2是两倍，0.5是一半，负值则沿该轴翻转元素。skew(x, y)— 沿每个轴以度为单位倾斜元素，产生类似平行四边形的扭曲，常用于风格化标题或卡片效果。
函数顺序很重要
浏览器按 书写的顺序 应用变换函数，每个函数都作用于前一个函数留下的坐标系。此工具始终以固定顺序写入 — translate、rotate、scale、skew — 这是组合偏移、旋转和缩放的最可预测的顺序，无需一个函数扭曲另一个函数的效果。如果您需要特定效果的不同合成顺序，请在复制 CSS 后手动重新排列函数。
为了保持输出整洁，仅当函数实际更改内容时才包含该函数：translate(0px, 0px)、rotate(0deg)、scale(1, 1) 和 skew(0deg, 0deg) 都是无操作，因此被省略。如果每个值都处于默认值，工具输出 transform: none;。
如何使用
- 设置 平移 X 和 平移 Y 以像素为单位移动元素。
- 拖动 旋转 以旋转元素，单位为度（-360 至 360）。
- 设置 缩放 X 和 缩放 Y 以调整大小 —
1保持原始大小。 - 拖动 倾斜 X 和 倾斜 Y 以倾斜元素，单位为度。
- 从代码输出中复制生成的
transform声明，并将其粘贴到您的样式表中。
常见问题
为什么 scale 是普通数字而不是百分比？
CSS 的 scale() 函数采用无单位的乘数，而不是百分比 — 1.5 表示原始大小的 150%，0.5 表示 50%。匹配原始 CSS 语法意味着您可以直接粘贴输出，无需转换。
我可以为使用此工具构建的变换添加动画吗？
是的 — transform 是 CSS transition/animation 属性的常见目标。在其旁边添加 transition: transform 0.3s ease; 规则（在基本状态或 :hover 上）来在值之间添加动画。
translate/rotate/scale/skew 的顺序会改变视觉结果吗？
是的。由于每个函数都作用于前一个函数留下的坐标系，translate() 然后 rotate() 产生的结果与 rotate() 然后 translate() 不同。此工具使用固定的可预测顺序；如果需要不同的合成，请手动编辑复制的 CSS。
此工具是否存储或上传任何内容？ 否。所有计算都在您的浏览器中本地运行 — 您的值永远不会离开您的设备。