使用CSS transition与transform结合可实现平滑动画。transition控制变化速度，transform实现缩放（scale）、旋转（rotate）等效果。通过设置transition: transform 0.3s ease，配合:hover触发，能实现元素悬停时的放大、旋转或复合动画。例如.box:hover { transform: scale(1.3); }实现放大，.icon:hover { transform: rotate(45deg); }实现旋转，.card:hover { transform: scale(1.1) rotate(10deg); }则同时应用缩放与旋转。变换顺序不影响最终效果，但建议先scale后rotate。合理设置transform-origin和缓动函数（如cubic-bezier）可提升动画质感。
使用CSS的transition和transform结合，可以轻松实现平滑的动画效果。其中scale用于缩放元素，rotate用于旋转元素。通过添加过渡属性，可以让这些变换过程变得流畅自然。
基本语法与原理
transition 控制属性变化的速度曲线，常用于:hover等状态切换时产生动画。而 transform 可以对元素进行变形操作，如缩放、旋转、平移等。
将两者结合，就能在用户交互时实现视觉上的动态反馈。
常用写法：
立即学习“前端免费学习笔记（深入）”；
transition: transform 0.3s ease;transform: scale(1.2) rotate(15deg);
实现缩放（scale）动画
当鼠标悬停时放大按钮或图片，是常见交互效果。
示例代码：
.box {width: 100px;
height: 100px;
background: #3498db;
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.3);
}
说明：默认状态下元素大小为原始尺寸，鼠标移入后平滑放大至1.3倍。
实现旋转（rotate）动画
图标或徽标常通过旋转增加动感。
示例：让一个正方形在悬停时旋转45度
.icon {width: 60px;
height: 60px;
background: #e74c3c;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.icon:hover {
transform: rotate(45deg);
}
cubic-bezier函数可自定义缓动效果，使动画更生动。
同时使用 scale 和 rotate
你可以将多个 transform 函数组合使用，实现复合动画。
例如：悬停时既放大又旋转
.card {width: 120px;
height: 120px;
background: #9b59b6;
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.1) rotate(10deg);
}
注意：多个变换函数顺序不影响最终视觉结果，但建议先缩放再旋转，逻辑更清晰。
基本上就这些。只要设置好transition监听transform，再通过伪类或JS触发变化，就能做出顺滑的scale和rotate动画。不复杂但容易忽略细节，比如过渡时间、变换原点（transform-origin）等，可根据需要进一步调整。
