:hover配合transform可实现图片悬停放大旋转效果：基础为scale(1.2) rotate(5deg)，加transform-origin:center居中变换，支持cubic-bezier缓动及ID选择器精准控制，现代浏览器兼容。
用CSS的:hover伪类配合transform属性就能轻松实现图片悬停时放大并旋转的效果，无需JavaScript。
基础实现：缩放 + 旋转
给图片添加类名（比如 hover-effect），然后在CSS中定义悬停状态：
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.2) rotate(5deg);
}
说明：
-
transition让变化过程平滑，推荐加上，否则会突兀跳变 -
scale(1.2)表示放大到原尺寸的120%，可按需调整（如1.1或1.3） -
rotate(5deg)表示顺时针旋转5度，负值（如-5deg）为逆时针
增强体验：保持居中缩放
默认缩放会以左上角为原点，容易“跑位”。加一行 transform-origin: center; 可让缩放和旋转都围绕图片中心进行：
立即学习“前端免费学习笔记（深入）”；
.hover-effect {
transition: transform 0.3s ease;
transform-origin: center;
}
.hover-effect:hover {
transform: scale(1.2) rotate(5deg);
}
进阶微调：不同方向旋转 + 延迟/缓动
如果想让效果更灵动，可以组合更多变换或调整动画节奏：
- 左右轻微摇摆：
transform: scale(1.15) rotate(-3deg);→transform: scale(1.15) rotate(3deg);（配合:hover切换） - 加入延迟或慢入慢出：
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - 只对特定图片生效：用ID（如
#featured-img:hover）或更具体的类选择器避免全局影响
兼容性与注意事项
现代浏览器（Chrome、Firefox、Safari、Edge）均支持。注意两点：
- 旧版IE（≤IE9）不支持
transform和transition，如需兼容可忽略或加JS降级 - 图片容器最好有明确宽高或
display: inline-block，防止缩放时布局抖动
