字体图标旋转 icomoon

Question

<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);
}

我现在这么写的没起作用

Answer 1

hover里面加上动画过渡

transition: all 1s;

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

Answer 2

translate呢？动画不加上过渡的么？

Answer 3

单这么看代码，没什么问题。应该还是你内部的bug，是不是冲突了，然后别的地方的js或者css影响了这里，试着换个class或者id名测试下看看吧。