：悬停旋转CSS保持开启状态

2023年3月9日 251次阅读

:)非常感谢您的时间.

我在悬停时用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);

}

最佳答案 我想要一个纯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>
点赞