使用CSS的@keyframes和transform: rotateZ()可创建图标旋转动画。1. 定义@keyframes spin从0deg到360deg实现完整旋转；2. 将animation属性应用于.icon类，设置时间为2s、线性过渡和无限循环；3. 可调整持续时间、方向或旋转角度实现不同效果；4. 通过will-change: transform启用硬件加速提升性能。适用于加载中或交互反馈场景。
要实现图标旋转动画，可以使用CSS的transform: rotateZ()配合@keyframes来创建平滑的旋转效果。rotateZ() 实际上等同于 rotate()，表示在二维平面内围绕Z轴旋转元素。
1. 定义关键帧动画 @keyframes
通过@keyframes设定旋转的变化过程。比如从0度转到360度：
@keyframes spin { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); }}
你也可以写成 from 和 to 的形式：
@keyframes spin { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); }}
2. 应用动画到图标元素
将定义好的动画绑定到目标图标上，比如一个带有类名 icon 的元素：
立即学习“前端免费学习笔记（深入）”；
.icon { display: inline-block; animation: spin 2s linear infinite;}
说明：
PicDoc
AI文本转视觉工具，1秒生成可视化信息图
6214 查看详情 spin：对应上面定义的@keyframes名称 2s：动画持续2秒 linear：匀速旋转 infinite：无限循环
3. 示例：旋转一个字体图标
假设你使用 Font Awesome 图标：
加上上述CSS后，这个图标就会持续旋转。你还可以调整速度或方向：
想让动画慢一点？把 2s 改成 4s 想反向旋转？把 linear 换成 linear reverse 或在 keyframes 中改为从360deg到0deg 只转半圈？改成 rotateZ(180deg)
4. 可选优化：启用硬件加速
为了更流畅的动画表现，可以添加 transform: translateZ(0) 或使用 will-change：
.icon { animation: spin 2s linear infinite; will-change: transform;}
基本上就这些。使用 rotateZ 配合关键帧，就能轻松实现图标旋转动画，适用于加载图标、交互反馈等场景。
以上就是如何使用CSS实现图标旋转动画_transform rotateZ关键帧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/995161.html
微信扫一扫 
支付宝扫一扫 
