：悬停旋转CSS保持位置发现

Question

:)非常感谢您的时间伙计。

我在悬停时用CSS旋转了一个对象，并希望它在停止时保持它的新位置。我已经四处搜寻，但唯一能找到的是css :hover rotate element and keep the new position，这似乎超越了。

这个效果可能纯粹用CSS实现吗？一旦你停止盘旋，我想让图标保持在180的位置。

我用这个代码：

i.fa.fa-globe:hover { 
color: #e9204f; 
transition: 0.9s; 
transform: rotatey(180deg); 

}

而且它是一个字体真棒图标，如果这有什么差别。

编辑：

给大家在Stackoverflow上。谢谢。感谢您参加一个论坛，在这个论坛中，人们知道有初学者，而且我们不是因为我们一开始就不了解解释而不是混蛋或懒惰。你们真是太棒了，谢谢你，非常感谢你。

EDIT2 - 为大家简单的CSS解决其他需要它（从绅士采取谁帮助了评论）：

.lovernehovermarket i.fa.fa-rocket { 
transform: rotate(0deg); 
transition: transform 999s; 

}

.lovernehovermarket:hover i.fa.fa-rocket { 
color: #e9204f; 
transition: 0.9s; 
transform: rotate(100deg); 

}

Answer 1

使用动画，并在元素悬停时使用JS事件侦听器应用它（mouseover事件）。当元素盘旋了一日一次，删除事件监听器：

var rect = document.querySelector('.rectangle') 
 

 
function rotate() { 
 
    this.classList.add('rotate'); 
 
    
 
    rect.removeEventListener('mouseover', rotate); 
 
} 
 

 
rect.addEventListener('mouseover', rotate);

.rectangle { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gold; 
 
} 
 

 
.rotate { 
 
    animation: rotate 0.5s linear; 
 
} 
 

 
@keyframes rotate { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 

 
    to { 
 
    transform: rotate(180deg); 
 
    } 
 
} 
 

 
body { 
 
    padding: 30px; 
 
}

<div class="rectangle"></div>

Answer 2

你还需要在你的元素经常CSS初始transform状态，以便它可以在两个之间变换定义的状态：

.rotate { 
 
    width: 20px; 
 
    height: 100px; 
 
    background: blue; 
 
    transition: 0.9s; 
 
    transform: rotate(0deg); 
 
} 
 

 
.rotate:hover { 
 
    transform: rotate(180deg); 
 
} 
 

 
body { 
 
    padding: 100px; 
 
}

<div class="rotate"></div>

Answer 3

如果要保持旋转状态，则可能必须使用一个小JQuery来检查转换何时结束并更改该类，以便在模糊时不会恢复为其原始状态。

这样div旋转一次，然后改变它的类以保持旋转状态。

$('.rotate').hover(function() { 
 
    $(this).addClass("animate"); 
 
    $(this).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', 
 
    function(e) { 
 

 
\t \t $(this).removeClass('rotate').addClass('rotated'); 
 

 
    }); 
 

 
});

.rotate { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gold; 
 
    transition-property: transform; 
 
    transition-duration: 1.5s; 
 
    transition-timing-function: linear; 
 
} 
 

 
.animate { 
 
    animation: rotate 1s linear; 
 
    transform: rotate(180deg); 
 
    animation-play-state: running; 
 
} 
 
.rotated 
 
{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background: gold; 
 
    transform: rotate(180deg); 
 
} 
 

 
body { 
 
    padding: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="rotate">some text</div>

Answer 4

我想要一个纯CSS的解决方案，你可以设置一个跃迁时间回到基态相当高。

这不是永远，但它是非常接近对于大多数用户：

.test { 
 
    display: inline-block; 
 
    margin: 10px; 
 
    background-color: tomato; 
 
    transform: rotate(0deg); 
 
    transition: transform 999s 999s; 
 
} 
 
.test:hover { 
 
    transform: rotate(90deg); 
 
    transition: transform 0.5s; 
 
}

<div class="test">TEST</div>