iconfont图标字体如何实现旋转效果?

Cristina_Guan
  • 45

iconfont图标字体如何实现旋转效果?

看了网上有人说要加display: inline-block,我加了还是不起作用,求大神解答?

.rotate:before {
font-size: 1rem;
display: inline-block!important;
transform: rotate(135deg);
-ms-transform: rotate(135deg);
/ IE 9 /
-moz-transform: rotate(135deg);
/ Firefox /
-webkit-transform: rotate(135deg);
/ Safari 和 Chrome /
-o-transform: rotate(135deg);
/ Opera /
display: inline-block!important;
}
图片描述

加载的字体图标出来了,但是没有旋转效果

回复
阅读 5.8k
3 个回答

transition或keyframe+animation
建议买本书学习css

〇equals0
  • 1
新手上路,请多包涵

哥们,你得让它动起来啊

小哥哥,你要给它定义一个动画啊,比如:

.rotate:before {
  animation: rotate 0.5s infinite;
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

详情看w3school的动画教程

宣传栏