CSS工具/CSS变换生成器
CSS变换生成器
使用平移、旋转、缩放和倾斜控制可视化创建CSS变换
变换控制
平移
0px
0px
旋转
0°
缩放
1.0
1.0
1.0
倾斜
0°
0°
预设
预览
元素
虚线边框显示原始位置
CSS代码
css
Loading...CSS变换指南
了解CSS变换以及如何创建视觉效果
什么是CSS Transform？
CSS变换允许您通过平移（移动）、旋转、缩放和倾斜来修改元素的视觉呈现。变换不会影响文档流 - 当变换的元素在视觉上移动时，其他元素保持原位。
变换函数
- translate(): 水平和垂直移动元素
- rotate(): 围绕中心点旋转元素
- scale(): 增加或减少元素大小
- skew(): 沿X和Y轴倾斜元素
使用方法
- 使用平移控制移动元素
- 调整旋转使元素旋转
- 缩放以调整元素大小
- 启用3D模式进行透视变换
提示
- 组合多个变换以获得复杂效果
- 使用transform-origin更改轴心点
- 3D变换需要在父元素上设置perspective
常见问题
translate和position有什么区别？
translate在视觉上移动元素而不影响文档流 - 其他元素保持原位。position（relative、absolute）可能会影响布局和兄弟元素。translate还具有GPU加速，使其更适合动画。
如何更改transform origin？
使用transform-origin属性设置轴心点。默认值是'center center'。您可以使用关键字（top、left、center、right、bottom）、百分比或像素值。例如，'transform-origin: top left'从左上角旋转。
为什么我的3D变换不起作用？
3D变换需要perspective来显示深度。在父元素上添加'perspective: 1000px'。如果有嵌套的3D变换，还要确保设置'transform-style: preserve-3d'。perspective值控制3D效果的强度。
可以为变换添加动画吗？
可以，变换非常适合动画。在transform属性上使用CSS过渡或关键帧动画。变换具有硬件加速，可提供流畅的60fps动画。结合'will-change: transform'以获得最佳性能。
变换以什么顺序应用？
变换从右到左应用。'transform: rotate(45deg) translate(100px)'先平移，然后旋转。顺序很重要，因为每个变换都会影响后续变换。要先平移后旋转，使用'transform: translate(100px) rotate(45deg)'。