toolsmoah

变换生成器

直观地创建和预览 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 集成更容易。

    变换生成器