html鼠标悬停停止旋转,html – 鼠标悬停时用css旋转图标

签出后我实现了下面的代码,但效果没有发生,不知道它缺乏的地方..

.rotate {

-webkit-transition: -webkit-transform 0.4s ease-in-out;

-moz-transition: -moz-transform 0.4s ease-in-out;

-o-transition: -o-transform 0.4s ease-in-out;

-ms-transition: -ms-transform 0.4s ease-in-out;

transition: transform 0.4s ease-in-out;

cursor:pointer;

}

.rotate:hover {

color:#afafaf;

-webkit-transform: rotateZ(360deg);

-moz-transform: rotateZ(360deg);

-ms-transform: rotateZ(360deg);

-o-transform: rotateZ(360deg);

transform: rotateZ(360deg);

}

HTML

Build your Resume

编辑：将旋转CLASS从图标更改为父级