在鼠标悬停时使用 css 旋转图标答案

【问题标题】：Rotate icon with css on mouse hover在鼠标悬停时使用 css 旋转图标
【发布时间】：2014-03-29 17:59:46
【问题描述】：

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

<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>

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

【问题讨论】：

你在什么浏览器中测试这个？如果是 IE8 或更高版本，则没有机会。你还声明什么文档类型？
rotate 类应该属于父容器或h2 标签，而不是icon 元素。
@Mr_green : 已经测试过了..
@atjoshi 检查这个fiddle
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> w3.org/1999/xhtml">在firefox和chrome中测试

标签： html css icons rotatetransform

【解决方案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); }
}

【讨论】：