css - 字体图标旋转 icomoon

问题描述

问 题

<div class="col-md-3 col-sm-3 col-xs-6 text-center ">
                <div class="notice-box">
                    <span class="cma-book"></span>
                    <p class="text-dark fs20">报考条件</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-6 text-center">
                <div class="notice-box">
                    <span class="cma-note"></span>
                    <p class="text-dark fs20">注册流程</p>
                </div>
            </div>

用的是字体图标
怎么hover的时候图标沿垂直方向旋转360deg

#section9 .notice-box span:hover   {
    transform: rotate3d(0,1,0,360deg);
    -webkit-transform: rotate3d(0, 1, 0, 360deg);
}

我现在这么写的没起作用

解决方案

hover里面加上动画过渡

transition: all 1s;

再试试，可能是没动画过渡，显示太快了没看出效果？

这篇关于css - 字体图标旋转 icomoon的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！