CSS 变换试验台
使用六个有范围的数值控件，在本地预览并复制同一 CSS transform 声明。
CSS 变换试验台
平移：−500 至 500 px；旋转：−360 至 360 度；统一缩放：0–5；两个倾斜角：−80 至 80 度。须输入非空有限数值，允许小数。缩放为零会使卡片收缩为零。无效输入会隐藏卡片、移除旧 CSS 并禁用复制。
声明始终列出 translate、rotate、scale、skewX、skewY。CSS 组合这些函数时，最右侧函数先作用于点。变换原点位于 100 × 100 CSS 像素卡片的中心，不另行计算数学示意图。 浏览器在有限预览区域内呈现二维 CSS，区域外的变换内容会裁剪。不提供三维变换、透视、函数重排或物理测量，不上传输入。
2D
使用步骤
如何使用
- 设置水平/垂直平移、旋转、统一缩放及水平/垂直倾斜。
- 查看二维预览及生成的 CSS 声明。
- 复制声明或重置全部控件。
固定声明顺序
声明始终列出 translate、rotate、scale、skewX、skewY。CSS 组合这些函数时，最右侧函数先作用于点。变换原点位于 100 × 100 CSS 像素卡片的中心，不另行计算数学示意图。
有限数值范围
平移：−500 至 500 px；旋转：−360 至 360 度；统一缩放：0–5；两个倾斜角：−80 至 80 度。须输入非空有限数值，允许小数。缩放为零会使卡片收缩为零。无效输入会隐藏卡片、移除旧 CSS 并禁用复制。
预览范围
浏览器在有限预览区域内呈现二维 CSS，区域外的变换内容会裁剪。不提供三维变换、透视、函数重排或物理测量，不上传输入。
常见问题
你可能还想知道
可以重排函数吗？
不可以。声明顺序固定，预览与复制的 CSS 使用相同顺序。
卡片为什么会消失？
缩放为零会收缩卡片，大变换可将其移出裁剪区域，无效输入也会隐藏卡片。