css中iconfont图标旋转

旋转的方法很多，这里使用的是transform。

transform: rotate(360deg) scale(1.2); 旋转360°，放大1.2倍

<div class="p1">

<span><i class="iconfont">&#xe969;</i></span>

</div>

图标是阿里巴巴矢量图标库的图标。

在设置css是一定要注意将i设置为行内块元素 display: inline-block; 这个是重点，不设置行类块元素，旋转死活效果上不去。

.p1 .iconfont{

transition: All 0.5s linear ;

-webkit-transition: All 0.5s linear ;

-moz-transition: All 0.5s linear ;

-o-transition: All 0.5s linear ;

display: inline-block;

}

.p1 :hover .iconfont{

transform: rotate(360deg) scale(1.2);

-webkit-transform: rotate(360deg) scale(1.2);

-moz-transform: rotate(360deg) scale(1.2);

-o-transform: rotate(360deg) scale(1.2);

-ms-transform: rotate(360deg) scale(1.2);

}

其他元素旋转直接设置就可以