html - 在鼠标悬停时使用 css 旋转图标

Question

检查后我实现了下面的代码，但效果没有发生，不知道它缺少哪里..

<style>


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

            }
            </style>

HTML

<div class="col-lg-6 col-md-6 col-sm-12">
                <h2 align="center"><a href="abc.php" class="rotate"> <icon class="icon icon-rocket icon-2x "> </icon> </a> <br />
                Build your Resume </h2>
            </div>

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

Answer 1

它将与animation：

<div class="col-lg-6 col-md-6 col-sm-12">
    <h2 align="center"><a href="abc.php" class="rotate"> <icon class="icon icon-rocket icon-2x "> </icon> </a> <br />
        Build your Resume </h2>
</div>

CSS：

.rotate {
    cursor:pointer;
}

.rotate:hover { 
    color:#afafaf;
    -moz-animation: spin .4s 1 linear;
    -o-animation: spin .4s 1 linear;
    -webkit-animation: spin .4s 1 linear;
    animation: spin .4s 1 linear;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(359deg); }
}

@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(359deg); }
}

@-o-keyframes spin {
    0% { -o-transform: rotate(0deg); }
    100% { -o-transform: rotate(359deg); }
}

@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(359deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}