在网页设计中，为图片添加缩放旋转效果能够极大地增强页面的视觉吸引力。而纯 CSS 就能巧妙实现这一效果，下面为大家介绍相关方法与技巧。

要实现图片的缩放效果，可使用 CSS 的 transform 属性。transform 提供了多种变换函数，其中 scale() 函数专门用于缩放元素。比如，若要将一张图片在水平和垂直方向上同时放大 1.5 倍，只需在 CSS 样式中对该图片元素设置 “transform: scale(1.5);” 即可。如果只想在水平方向缩放，可设置 “transform: scaleX(1.5);”；仅在垂直方向缩放则是 “transform: scaleY(1.5);”。

在缩放时，还可以指定缩放的中心点。默认情况下，元素是以其中心进行缩放的，但我们可以通过 transform-origin 属性来改变这一点。例如，“transform-origin: left top;” 会将缩放中心点设置为元素的左上角。这样，当进行缩放操作时，图片会以左上角为基准进行缩放，呈现出独特的效果。

接着来说说图片的旋转效果。同样利用 transform 属性，使用 rotate() 函数。“transform: rotate(45deg);” 可以让图片顺时针旋转 45 度。deg 是角度单位，负值则表示逆时针旋转，如 “transform: rotate(-30deg);” 会使图片逆时针旋转 30 度。

若要同时实现缩放和旋转效果，只需在 transform 属性中按顺序写入多个变换函数即可。例如，“transform: scale(1.2) rotate(30deg);” 这会先将图片放大 1.2 倍，然后再顺时针旋转 30 度。

为了让这些效果更生动，还可以添加过渡效果。通过 transition 属性来实现，如 “transition: transform 0.5s ease;”。这里，0.5s 表示过渡时间为 0.5 秒，ease 是过渡的缓动函数，它让过渡效果更加自然。当鼠标悬停在图片上时，结合:hover 伪类改变图片的 transform 属性值，就能呈现出动态的缩放旋转效果。

纯 CSS 实现图片缩放旋转效果并不复杂，掌握这些方法与技巧，能为网页设计增添不少亮点，吸引用户的目光，提升用户体验。