变换生成器
直观地创建和预览 CSS 变换属性。
CSS Transform 是一个强大的 CSS 属性，可让您在 2D 或 3D 空间中变换 Web 元素。通过平移、旋转、缩放和倾斜等变换，您可以创建动态和交互式的 Web 设计。通过实时预览轻松创建所需的效果。
变换设置
调整每个变换属性
预览
检查生成的变换效果
Transform
生成的 CSS
transform: none;预设
尝试预定义的变换样式
变换函数参考
变换函数
- • translate(x, y): translate(x, y): 按 x, y 量移动元素
- • scale(x, y): scale(x, y): 按 x, y 比例缩放元素
- • rotate(angle): rotate(angle): 按角度旋转元素
- • skew(x, y): skew(x, y): 按 x, y 度倾斜元素
使用技巧
- • 多个变换函数可以用空格组合
- • 使用 transform-origin 更改变换原点
- • 与 transition 一起使用以创建动画效果
- • 使用 perspective 属性进行 3D 变换
📚 完整的 CSS 变换指南
掌握 CSS 变换的详细指南
🎯 变换基本概念
CSS Transform 是一个更改元素形状、大小和位置的 CSS 属性。它允许在不破坏正常文档流的情况下对元素进行视觉变换。
基本语法：
transform: function(value) function(value) ...;📐 变换函数详情
🔄 平移（移动）
- •
translate(x, y): translate(x, y): 沿 X, Y 轴移动 - •
translateX(x): translateX(x): 仅沿 X 轴移动 - •
translateY(y): translateY(y): 仅沿 Y 轴移动 - •
translate3d(x, y, z): translate3d(x, y, z): 3D 移动
transform: translate(50px, 100px);📏 缩放（调整大小）
- •
scale(x, y): scale(x, y): 缩放 X, Y 轴 - •
scaleX(x): scaleX(x): 仅缩放 X 轴 - •
scaleY(y): scaleY(y): 仅缩放 Y 轴 - • 大于 1 放大，小于 1 缩小
transform: scale(1.5, 0.8);🔄 旋转（旋转）
- •
rotate(angle): rotate(angle): 围绕 Z 轴旋转 - •
rotateX(angle): rotateX(angle): 围绕 X 轴旋转 - •
rotateY(angle): rotateY(angle): 围绕 Y 轴旋转 - • 对角度使用 deg, rad, turn 单位
transform: rotate(45deg);📐 倾斜（剪切）
- •
skew(x, y): skew(x, y): 沿 X, Y 轴倾斜 - •
skewX(angle): skewX(angle): 沿 X 轴倾斜 - •
skewY(angle): skewY(angle): 沿 Y 轴倾斜 - • 变换为平行四边形形状
transform: skew(15deg, 5deg);🎨 变换原点（变换点）
transform-origin 属性设置变换原点。默认为元素的中心 (50% 50%)。
使用关键字
transform-origin: top left;使用百分比
transform-origin: 25% 75%;使用像素
transform-origin: 10px 20px;⚡ 性能优化技巧
✅ 建议
- • 仅对 transform 和 opacity 进行动画处理
- • 使用 will-change 属性
- • 使用 3D 加速 (translateZ(0))
- • 创建复合层以获得更好的性能
❌ 避免事项
- • 对 width, height 进行动画处理
- • 对 left, top 位置进行动画处理
- • 过多的变换嵌套
- • 不必要的 will-change 使用
性能优化示例：
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 动画和过渡
Transform 可以与 CSS Transition 和 Animation 一起使用以创建平滑效果。
过渡示例
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}关键帧动画示例
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 浏览器兼容性
所有现代浏览器都支持 CSS Transform，但旧版浏览器可能需要供应商前缀。
供应商前缀示例：
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 实际使用示例
卡片悬停效果
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}加载微调器
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}模态框进入效果
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}按钮点击效果
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 调试和开发工具
浏览器开发工具
- • 在元素面板中实时编辑
- • 在计算选项卡中检查最终值
- • 使用性能选项卡进行性能分析
- • 使用 3D 视图检查层结构
有用的 CSS 属性
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 专业技巧
性能技巧
使用 transform3d() 或 translateZ(0) 创建复合层以进行 GPU 加速可以显著提高动画性能。
可访问性技巧
使用 prefers-reduced-motion 媒体查询为对运动敏感的用户提供替代方案。
设计技巧
正确设置 transform-origin 可以创建更自然的变换效果。
开发技巧
使用 CSS 变量动态控制变换值使 JavaScript 集成更容易。