:hover 旋转 CSS 保持位置不变

Question

我在悬停时使用 CSS 旋转一个对象，并希望当您取消悬停它时它保持在新位置。我已经四处搜索，但我唯一能找到的是css :hover 旋转元素并保持新的位置，这似乎超出了范围。

这种效果可以纯粹用CSS实现吗？我希望当你停止悬停时图标保持在 180 度位置。

我使用了这段代码：

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

如果这有什么区别的话，它也是一个很棒的字体图标。

---

编辑 - 为其他需要它的人提供的简单 CSS 解决方案（摘自评论）：

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

Answer 1

使用动画，并在元素悬停（鼠标悬停事件）时使用 JS 事件侦听器应用它。当元素第一次悬停时，删除事件监听器：

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>