a11y.skipToMainContent
1

CSS 变换生成器

编译 CSS 以滑子进行变换——翻译,缩放,旋转,skew和全3D——并复制变换属性.

2D transforms

px
px
deg
deg
deg

3D transforms

px
deg
deg
deg
px

Preview

BOX

CSS

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Transform Generator

  1. 调整用于翻译、缩放、旋转和skew的2D幻灯片.
  2. 选择一个变形源来改变分点 .
  3. 打开3D部分设置旋转X/Y/Z,翻译Z和一个父视角.
  4. 点击 CSS 复制以抓取转换声明 .

{姓名}是什么来着?

CSS 变形生成器构建 transform 属性。 使用2D滑行器来翻译X/Y,缩放X/Y,旋转和skewX/Y,设置" transform-起源",再倒入3D区来旋转X,旋转Y,旋转Z,翻译Z和一个父 透视.

. 带有标签元素的网格化预览框实时显示结果,这样您就可以准确看到每个函数的堆放方式. CSS 中功能的顺序和生成的宣告为您保持了合理,可预测的顺序.

所有东西都在你的浏览器里运行 将由此产生的 transform 行-连同任何 transform-起源透视规则-并粘入您的样式表。

Advertisement

FAQ

转变功能的顺序为何重要?
CSS应用了左到右的变换函数,因此再旋转再翻译会给出与再旋转不同的结果. 生成器输出的顺序一致; 如果您需要特定的序列, 请调整您的 CSS .
为什么对父母不看盒子?
对于3D旋转的外观正确,视角通常被设定在母体上(包含已变换的框的元素). 该工具将其应用于预览阶段,并在生成的 CSS 注释中注明了这一点.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement