css连续旋转_如何使用CSS连续旋转图像

最新推荐文章于 2025-05-01 00:18:14 发布

翻译最新推荐文章于 2025-05-01 00:18:14 发布 · 809 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://flaviocopes.com/rotate-image/

文章标签：

#定位 #css #css3 #java #html

本文介绍了如何在HTML页面中使用CSS实现图像的连续旋转。通过添加特定的CSS指令，可以对任何HTML元素进行旋转动画效果，无论是SVG图像还是其他类型的图片。可以通过调整动画时长来控制旋转速度，并提供了Codepen的示例展示旋转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css连续旋转

While building the React Handbook landing page, I had to search how to rotate an image. I wanted to rotate an SVG image, but this works for any image type. Or any HTML element, actually.

在构建React Handbook登陆页面时，我不得不搜索如何旋转图像。我想旋转SVG图像，但这适用于任何图像类型。实际上是任何HTML元素。

Add this CSS instruction to the element you want to rotate:

将此CSS指令添加到要旋转的元素中：

animation: rotation 2s infinite linear;

You can also choose to add a rotate class to an element, instead of targeting it directly:

您还可以选择将rotate类添加到元素，而不是直接定位它：

.rotate {
  animation: rotation 2s infinite linear;
}

tweak the 2s to slow down or speed up the rotation period.

调整2s以减慢或加快旋转周期。

Then add this line, outside of any selector:

然后在任何选择器之外添加以下行：

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

That’s it! Your elements should now rotate.

而已！您的元素现在应该旋转了。

Check out the CSS Animations and CSS Transitions guides

查看CSS动画和CSS过渡指南

Here is the result shown in Codepen:

这是Codepen中显示的结果：

See the Pen How to use CSS Animations to continuously rotate an image by Flavio Copes (@flaviocopes) on CodePen.

见笔如何使用CSS动画连续旋转的图像由弗拉维奥·科佩斯( @flaviocopes上) CodePen 。

翻译自: https://flaviocopes.com/rotate-image/

css连续旋转