轻松生成 CSS3 变换
一款强大且直观的工具，可无需编写代码即可创建复杂的CSS3变换。实时预览更改并复制生成的CSS代码以在您的项目中使用。
变换控件
Translation
0px
0px
0px
Rotation
0°
0°
0°
Scale
1
1
1
Skew
0°
0°
变换 原点
Presets
Preview
CSS3
Animation
s
生成 代码
CSS
.element { transform: translate(0px, 0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1) skewX(0deg) skewY(0deg); transform-origin: 50% 50%; }
复制到剪贴板！
强大的功能
直观的控件
使用响应式滑块和直观的控件轻松调整变换参数。
实时预览
通过即时视觉反馈准确查看变换的外观。
干净的 CSS 输出
获取格式良好、可用于生产的 CSS 代码，您可以立即复制并使用这些代码。
变换预设
从流行的变换样式开始，然后根据您的需要对其进行自定义。
3D 变换
创建令人惊叹的 3D 效果，并控制所有三个轴和透视。
动画变换
向变换添加平滑动画，并控制持续时间和迭代次数。
3D卡片翻转
创建一个在悬停时翻转的交互式卡片，非常适合揭示额外的信息。
：悬停、缩放和旋转：
为按钮或图像添加引人注目的效果，这些按钮或图像在交互时缩放和旋转。
倾斜效果
应用微妙的倾斜转换以创建动态和现代的 UI 元素。
关于 CSS3 变换生成器
创建此工具是为了简化使用 CSS3 变换的过程。无论您是专业开发人员还是刚开始网页设计，此生成器都可以帮助您可视化和创建复杂的转换，而无需记住语法。
CSS3 转换允许您在 HTML 元素上旋转、缩放、移动、倾斜和创建 3D 效果。它们是现代网页设计的重要组成部分，但可能很难掌握。我们的生成器提供了一个直观的界面来试验不同的转换并立即查看结果。