实现元素旋转动画需结合transform、@keyframes和animation。首先用transform: rotate()设置旋转角度，再通过@keyframes定义从0deg到360deg的动画帧，接着使用animation属性指定动画名称、时长、速度曲线和循环次数，如animation: spin 2s linear infinite可实现匀速无限旋转。常用于加载动画或悬停效果，注意设置transform-origin确保旋转中心正确，默认为center center。
要实现元素的旋转动画，核心是使用 CSS 的 transform 和 @keyframes 配合 animation 属性。下面介绍具体实现方法。
1. 使用 transform: rotate() 实现基础旋转
你可以通过 transform: rotate() 让元素旋转指定角度。例如让一个盒子旋转 45 度：
.box { transform: rotate(45deg);}
这只是一个静态旋转。如果想让它动起来，就需要加入动画。
2. 使用 @keyframes 定义旋转动画
通过 @keyframes 可以定义动画的关键帧。比如从 0 度转到 360 度：
立即学习“前端免费学习笔记（深入）”；
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}
也可以写成百分比形式，便于控制中间状态：
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
3. 应用 animation 播放旋转动画
将定义好的动画应用到目标元素上，设置动画时长、循环次数等：
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情
.box { width: 100px; height: 100px; background: #3498db; animation: spin 2s linear infinite;}
上面代码中：
spin 是动画名称 2s 表示动画持续 2 秒 linear 表示匀速运动 infinite 表示无限循环
4. 常见应用场景与技巧
旋转动画常用于加载图标、按钮悬停效果等。例如鼠标悬停时旋转：
.button:hover { animation: spin 0.5s ease forwards;}
注意：forwards 表示动画结束后保持最后一帧的状态。
若需绕中心点精准旋转，确保元素的变换原点正确：
.box { transform-origin: center center;}
大多数情况下默认就是中心点，但对行内元素或定位元素可能需要手动设置。
基本上就这些。掌握 rotate、@keyframes 和 animation 的组合，就能轻松做出流畅的旋转动画。不复杂但容易忽略细节，比如 transform-origin 和动画完成后的状态控制。多试几次就能熟练了。
以上就是如何通过css实现元素旋转动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/996899.html
微信扫一扫 
支付宝扫一扫 
