Question

我想要一个图像旋转，当有人躲过它并且我成功但是当II鼠标移出图像返回到它的原始位置我不希望它返回原始位置我有使用以下代码

  <style>
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    }   

.rotate:hover   
{ 
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}   
</style>



</head>




<body>
<br><br><br>

<img src="./rotate_files/1.png" class="rotate">
<img src="./rotate_files/2.png" class="rotate">
<img src="./rotate_files/3.png" class="rotate">
<img src="./rotate_files/4.png" class="rotate">
<img src="./rotate_files/5.png" class="rotate">





</body></html>

Answer 1

这是你可以做到的方式。你需要使用jquery。

<强> HTML：

<img src="./rotate_files/1.png" class="rotate">
<img src="./rotate_files/2.png" class="rotate">
<img src="./rotate_files/3.png" class="rotate">
<img src="./rotate_files/4.png" class="rotate">
<img src="./rotate_files/5.png" class="rotate">

<强> CSS：

 .rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}   

.hoverstyle  
{ 
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg); 
-o-transform:rotate(360deg);
}

<强> JQUERY：

$(document).ready(function () {
$('img').hover(function(){
    $(this).addClass('hoverstyle');
});
});

JSFIDDLE DEMO HERE

悬停时旋转图像并防止其返回

1 个答案: