旋转图像 CSS MDN

CSS 旋转是一种广泛使用的技术，可帮助您为网站创建更吸引人的设计。它是通过 CSS 属性 transform 实现的，可以使元素按照不同的旋转度数进行旋转，并且可以在网站设计中产生有趣的效果。

变换属性（transform）

要在 CSS 中实现旋转图像，我们可以使用 transform 属性。这个属性可以有不同的值，用于定义不同类型的转换。其中，旋转值是 rotate()。

.rotate-image {
    transform: rotate(45deg);
}

在上面的例子中，.rotate-image 类的元素将以 45 度旋转。

您可以将 rotate() 函数的值改为不同的角度，以实现所需的旋转度数。如果您想让元素顺时针旋转，您可以使用正数值。如果您想让元素逆时针旋转，您可以使用负数值。

过渡属性（transition）

CSS 过渡（transition）属性使元素在状态改变时产生平滑过渡的效果。它通过指定变换的持续时间，以及何时启动或停止变换，来实现动画效果。

.transition-image {
    transition: transform 2s;
}
.transition-image:hover {
    transform: rotate(360deg);
}

在上面的例子中，.transition-image 类的元素将在 2 秒钟内变换 transform 属性。而当鼠标悬停在元素上时，该元素将以 360 度的角度旋转。

动画属性（animation）

CSS 动画（animation）属性使元素产生更复杂和控制性更强的动画效果。它能够让您指定多个帧，每帧都有不同的变换属性值。

.animation-image {
    animation: rotation 5s infinite linear;
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

在上面的例子中，.animation-image 类的元素将按线性计时函数进行旋转，并且该动画将无限循环播放，旋转 360 度需要 5 秒钟。而 @keyframes 规则将设置动画的不同帧，每帧都有不同的旋转角度。

总结

通过使用 transform、transition 和 animation 属性，您可以实现多种类型的旋转效果，为您的网站添加更多视觉上的吸引力。此外，这些属性可以通过 JavaScript 动态地更改其值，从而产生更动态的效果。