纯CSS实现图片的缩放旋转效果，核心依赖CSS的transform属性和transition属性，不需要编写任何JavaScript代码就能完成流畅的动态交互。transform属性可以直接对元素进行缩放、旋转等几何变换，transition属性则用来控制变换过程的过渡动画，让效果更自然。
核心属性说明
transform属性
transform是CSS3新增的变换属性，支持多种变换函数，实现图片缩放旋转主要用到以下两个函数：
- scale()：用于缩放元素，参数表示缩放倍数，比如scale(1.2)表示放大到原来的1.2倍，scale(0.8)表示缩小到原来的0.8倍，也可以分别设置水平和垂直方向的缩放，比如scale(1.2, 0.9)。
- rotate()：用于旋转元素，参数表示旋转角度，单位是deg，比如rotate(45deg)表示顺时针旋转45度，负数则表示逆时针旋转。
transition属性
transition用来设置元素状态变化时的过渡效果，避免变换瞬间完成显得生硬，常用属性值包括：
- transition-property：指定需要过渡的CSS属性，这里设置为transform即可。
- transition-duration：指定过渡动画的持续时间，比如0.3s表示0.3秒。
- transition-timing-function：指定过渡的速度曲线，常用ease表示先快后慢，linear表示匀速。
常见实现场景示例
鼠标悬停触发缩放旋转
这是最常见的用法，当鼠标移动到图片上时，图片自动放大并旋转一定角度，鼠标移开后恢复原始状态。
/* 基础样式 */
.img-hover {
width: 200px;
height: 200px;
object-fit: cover;
/* 设置过渡效果：transform属性变化，持续0.3秒，速度曲线为ease */
transition: transform 0.3s ease;
border-radius: 8px;
}
/* 鼠标悬停时的变换效果 */
.img-hover:hover {
/* 放大1.2倍，顺时针旋转15度 */
transform: scale(1.2) rotate(15deg);
}
对应的HTML代码为：
<img src="https://ipipp.com/sample.jpg" class="img-hover" alt="示例图片">
点击切换缩放旋转状态
如果需要点击图片切换缩放旋转状态，不需要JavaScript的话，可以结合CSS的:checked伪类和隐藏的复选框实现。
/* 隐藏复选框 */
.img-toggle-checkbox {
display: none;
}
/* 图片基础样式 */
.img-toggle {
width: 200px;
height: 200px;
object-fit: cover;
transition: transform 0.4s linear;
cursor: pointer;
border-radius: 8px;
}
/* 复选框被选中时，图片的变换效果 */
.img-toggle-checkbox:checked + .img-toggle {
/* 放大1.5倍，逆时针旋转30度 */
transform: scale(1.5) rotate(-30deg);
}
对应的HTML代码为：
<input type="checkbox" id="imgToggle" class="img-toggle-checkbox">
<label for="imgToggle">
<img src="https://ipipp.com/sample.jpg" class="img-toggle" alt="示例图片">
</label>
注意事项
- 使用transform变换时，元素默认的变换原点是中心位置，如果需要调整变换原点，可以使用transform-origin属性，比如设置transform-origin: top left表示以左上角为原点进行变换。
- 如果图片需要频繁触发缩放旋转效果，建议给图片设置will-change: transform属性，提前告知浏览器该元素会有变换操作，提升动画性能，减少卡顿。
- transform的变换不会影响页面其他元素的布局，属于脱离文档流的变换，不会造成周边元素的位置偏移，这一点比修改width、height属性实现缩放更友好。
总结
纯CSS实现图片缩放旋转效果的核心就是合理搭配transform和transition属性，通过不同的伪类或者状态选择器，可以覆盖大部分常见的交互场景。这种方式不需要引入额外的脚本，代码量小，性能也更有保障，非常适合轻量化的交互需求。你可以根据实际场景调整缩放倍数、旋转角度和过渡时间，实现符合设计要求的动态效果。
CSStransformtransition图片缩放图片旋转修改时间：2026-07-02 00:00:31