纯 CSS 实现图片旋转平移效果的方法与技巧

在网页设计中，为图片添加动态效果可以显著提升用户体验和页面的视觉吸引力。纯CSS就能轻松实现图片的旋转平移效果，无需借助JavaScript等其他复杂技术。下面就来详细介绍相关方法与技巧。

要实现图片的旋转效果，可以使用CSS的transform属性。通过设置rotate()函数，我们能够指定图片的旋转角度。例如，要将图片顺时针旋转45度，只需在CSS样式中添加如下代码：

img {
  transform: rotate(45deg);
}

若要创建一个旋转动画，可结合@keyframes规则和animation属性。定义一个名为“rotateAnimation”的动画，让图片在一定时间内从初始状态旋转到指定角度：

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

img {
  animation: rotateAnimation 5s linear infinite;
}

这段代码会使图片在5秒内匀速旋转360度，并无限循环。

接着说平移效果。同样利用transform属性，不过这次使用的是translate()函数。它可以在水平和垂直方向上移动元素。比如，要将图片向右平移50像素，向下平移30像素，代码如下：

img {
  transform: translate(50px, 30px);
}

若要实现平滑的平移动画，和旋转动画类似，结合@keyframes和animation属性。例如：

@keyframes translateAnimation {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(100px, 100px);
  }
}

img {
  animation: translateAnimation 3s ease-in-out;
}

这里图片会在3秒内以缓动的方式从初始位置平移到指定位置。

还可以通过设置过渡效果（transition），让图片在状态改变时（如鼠标悬停）平滑地过渡到新的旋转或平移状态。

纯CSS实现图片旋转平移效果具有简单高效的特点，掌握这些方法与技巧，能为网页设计增添更多精彩。