CSS 实现图片旋转效果的方法

在网页设计中，为图片添加旋转效果能够让页面更加生动和吸引人。使用 CSS 可以轻松实现这一效果，下面就来详细介绍相关方法。

CSS 中实现图片旋转主要借助 transform 属性，它提供了强大的转换功能，旋转是其中的一种常见应用。基本语法为：transform: rotate(angle);，这里的 angle 就是旋转的角度，单位是度数（deg）。

例如，要将一张图片顺时针旋转 45 度，可以这样写 CSS 代码：

img {
    transform: rotate(45deg);
}

如果想要逆时针旋转，只需将角度值设为负数，如 transform: rotate(-30deg); 就能让图片逆时针旋转 30 度。

除了简单的固定角度旋转，还可以通过 CSS 动画让图片实现动态旋转效果。利用 @keyframes 规则定义动画关键帧，再将动画应用到图片上。

首先定义一个旋转动画：

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

然后将这个动画应用到图片上：

img {
    animation: rotateAnimation 5s linear infinite;
}

上述代码中，animation 属性值的含义分别是：动画名称 rotateAnimation，动画持续时间 5s，动画速度曲线 linear（匀速），以及 infinite 表示无限循环播放动画。这样，图片就会在 5 秒内匀速旋转 360 度，并不断循环。

另外，还可以指定旋转的中心点。默认情况下，元素围绕其中心进行旋转，但可以使用 transform-origin 属性来改变这一点。比如：

img {
    transform-origin: top left;
    transform: rotate(45deg);
}

这会让图片以左上角为中心点进行旋转，创造出不同的视觉效果。

通过这些 CSS 方法，无论是简单的静态旋转还是炫酷的动态旋转效果，都能轻松实现，为网页设计增添独特的魅力。