Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
CSS变换生成器 - transform可视化工具
可视化调节rotate/scale/skew/translate变换效果。支持实时预览、预设效果和一键复制CSS代码。
效果预览
🎯
Transform
CSS代码
transform: none;变换设置
XY 平移 (Translate)
0px
0px
↻ 旋转 (Rotate)
0deg
⤢ 缩放 (Scale)
1x
1x
▱ 倾斜 (Skew)
0deg
0deg
变换原点 (Transform Origin)
预设效果
# 什么是 CSS transform？
CSS transform 属性允许您对元素进行旋转、缩放、倾斜或平移。这是CSS3中引入的强大功能， 可以在不改变文档布局的情况下实现各种视觉效果。transform 常用于动画、悬停效果和响应式设计中。
transform 支持多种变换函数，包括 translate（平移）、rotate（旋转）、scale（缩放）和 skew（倾斜）。 您可以单独使用这些函数，也可以组合使用多个函数来创建复杂的变换效果。
# 常用 transform 函数
- translate(x, y): 沿X轴和Y轴平移元素
- rotate(angle): 旋转元素，可指定角度
- scale(x, y): 缩放元素，可分别指定X和Y轴的缩放比例
- skew(x-angle, y-angle): 沿X轴和Y轴倾斜元素
- matrix(): 使用矩阵实现复杂的变换
# 如何使用本工具
- 使用滑块调整平移、旋转、缩放和倾斜参数
- 实时查看预览区域的变换效果
- 选择变换原点来改变变换的中心点
- 使用预设效果快速应用常见变换
- 点击"复制"按钮获取生成的CSS代码
# 常见问题 (FAQ)
transform 会影响文档流吗？
不会。transform 不会影响文档流，transformed 元素仍然占据其原始空间。 这使得transform成为创建动画和悬停效果的理想选择，不会引起页面重排。
transform-origin 有什么作用？
transform-origin 属性用于设置变换的基点。默认值是 center，即元素的中心。 您可以将其设置为 top left、bottom right 等值，或者使用具体的像素值或百分比来精确控制变换原点。
如何实现3D变换效果？
要实现3D变换，需要使用 transform-style: preserve-3d 和 perspective 属性。 然后可以使用 rotateX、rotateY、rotateZ、translateZ 等函数创建三维变换效果。