CSS过渡与transform结合可实现流畅交互动画。1. transition控制变化过程，transform定义形变效果；2. hover时scale实现按钮放大，rotate完成图标旋转；3. 多函数组合如scale(1.05) rotate(5deg)增强视觉层次；4. 配合transform-origin和缓动函数优化动画表现，提升用户体验且性能高效。
在网页动画设计中，CSS过渡（transition） 与 transform 结合使用，能实现流畅、高性能的视觉效果。特别是结合 scale 和 rotate 变换时，可以轻松创建出按钮悬停、图标旋转、卡片翻转等常见交互效果。
transition 与 transform 的基本原理
transition 控制属性变化的动画过程，比如持续时间、缓动函数和延迟；而 transform 负责对元素进行形变操作，如缩放（scale）、旋转（rotate）、位移（translate）等。
当两者结合时，元素在状态改变（如 hover、focus）时，transform 的值会通过 transition 平滑过渡，而不是立即跳变。
立即学习“前端免费学习笔记（深入）”；
- transition 定义动画的“如何变化”
- transform 定义“变成什么样”
- 两者配合无需 JavaScript 即可实现交互动画
缩放效果：transition + transform: scale
常用于按钮或图片的悬停放大效果，增强用户点击感知。
示例：图片悬停轻微放大
.card {
width: 200px;
height: 200px;
overflow: hidden;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.1);
}
说明：
- 默认状态下设置 transition 监听 transform 属性
- hover 时应用 scale(1.1) 实现 10% 放大
- ease 缓动让动画更自然
旋转效果：transition + transform: rotate
适合加载图标、菜单按钮、指示箭头等需要角度变化的场景。
示例：图标顺时针旋转 90 度
.arrow {
display: inline-block;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.arrow:hover {
transform: rotate(90deg);
}
提示：
- cubic-bezier 可定制更细腻的旋转节奏
- rotate(90deg) 表示顺时针旋转 90 度
- 可结合 transform-origin 调整旋转中心点
综合应用：缩放 + 旋转组合动画
多个 transform 函数可同时使用，实现更丰富的动效。
示例：悬浮卡片同时放大并轻微旋转
.flip-card {
width: 180px;
height: 180px;
background: #f0f0f0;
border: 1px solid #ddd;
transition: transform 0.5s ease-out;
transform-origin: center bottom; /* 以底部为中心旋转 */
}
.flip-card:hover {
transform: scale(1.05) rotate(5deg);
}
关键点：
- 多个 transform 函数用空格分隔
- transform-origin 控制旋转支点，避免元素“乱飞”
- ease-out 使动画结尾更柔和
基本上就这些。合理使用 transition 与 transform 的组合，既能提升用户体验，又不会影响页面性能，是现代前端动效的基石之一。不复杂但容易忽略的是细节控制，比如过渡时间和变换原点，调好之后效果立竿见影。
