css 图片 旋转 旋转动画

CSS可以轻松地旋转图片，并使用过渡或动画在页面上创建旋转效果。通过以下步骤可以使用CSS旋转图片。

img {
    transform: rotate(30deg);
}

上述代码将旋转图片30度。

如果您想让图像在鼠标悬停时旋转，可以使用:hover伪类并以同样的方式设置旋转：

img:hover {
    transform: rotate(30deg);
}

这将在鼠标悬停时旋转图像30度。

您还可以使用CSS动画来创建旋转动画。例如，以下CSS将使图像旋转360度：

img {
    animation: spin 2s linear infinite;
}

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

上述代码将在2秒内以线性速度旋转您的图像。无限参数将使旋转动画持续进行。