使用CSS transform: rotate() 和 @keyframes 可实现图片旋转动画：1. 用 transform: rotate(45deg) 设置静态旋转；2. 通过 @keyframes 定义从0deg到360deg的spin动画；3. 用 animation: spin 2s linear infinite 让图片持续匀速旋转；4. 可设置 transform-origin 调整旋转中心，或结合 :hover 实现悬停旋转。
想让图片在网页中旋转起来，CSS 提供了简单又强大的方式：结合 transform: rotate() 和 @keyframes。这种方式无需 JavaScript，仅用几行样式就能实现平滑的动画效果。
transform: rotate() 可以让元素绕其中心点旋转指定角度。比如让一张图片旋转 45 度：
img {
transform: rotate(45deg);
}
这里的 deg 是角度单位，90deg 是直角，360deg 表示完整一圈。但这样只是静态旋转，要动起来就得靠 @keyframes。
@keyframes 用来定义动画的关键帧。你可以设定从开始到结束过程中元素的状态变化。比如创建一个持续旋转的动画：
立即学习“前端免费学习笔记（深入）”；
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
这个动画名为 spin，从 0 度转到 360 度。你也可以写成百分比形式，控制更精细：
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
定义好动画后，通过 animation 属性将其绑定到图片元素：
img {
animation: spin 2s linear infinite;
}
</font>加上这行代码，图片就会持续匀速旋转了。
为了让旋转更顺滑，可以设置元素的变换原点，默认是中心点，但可自定义：
img {
transform-origin: center center; /* 默认值，也可设为 left top 等 */
animation: spin 2s linear infinite;
}
如果希望动画加载完再开始，可用 animation-delay；若想鼠标悬停时才旋转，可以结合伪类：
img:hover {
animation: spin 2s linear infinite;
}
基本上就这些。掌握 transform rotate 和 @keyframes 的配合，就能轻松实现图片旋转动画，无论是加载图标、轮播装饰还是交互反馈都很实用。不复杂但容易忽略细节，比如单位和循环设置。
以上就是如何在CSS中使用动画制作图片旋转_transform rotate与@keyframes控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
790
收藏
