:hover 旋转 CSS 保持位置答案

【问题标题】：:hover rotation CSS keep position on uncover:hover 旋转 CSS 保持位置
【发布时间】：2017-11-14 12:30:39
【问题描述】：

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

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

编辑 - 其他需要它的人的简单 CSS 解决方案（取自 cmets）：

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

【问题讨论】：

如果你是360度旋转，“新位置”不是和起始位置一样吗？
您好，非常感谢。抱歉，这是一个不好的例子——一个完美的例子。我有三个图标，其中一个只能旋转 180 度，当我移动悬停时，它会向上移动。所以我希望找到一种简单的方法，让它在我移动鼠标后保持在 180 度角。感谢您指出这一点，一定要喜欢 Stackoverflow。立即编辑。

标签： css css-transforms

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

&lt;div class="rectangle"&gt;&lt;/div&gt;

【讨论】：

您好！非常感谢你的帮助。对此，我真的非常感激。我在原来的帖子中写了一点错字，我很抱歉。它不会旋转 360 度。它旋转 180 度，一旦您移除悬停以保持新的 180 度角，我想要它。因此，图标从向上指向开始，然后当您将其悬停时它指向下方。但是，一旦我移除悬停，它就会再次指向上方。
@eMikkelsen 看看我的回答，它会使元素在鼠标移出时倒置，并且不会再次设置动画。

【解决方案2】：

您还需要在元素的常规 CSS 中添加一个初始 transform 状态，以便它可以在两个定义的状态之间转换：

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

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

body {
  padding: 100px;
}

&lt;div class="rotate"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

如果您想保持旋转状态，您可能需要使用一点 JQuery 来检查转换何时结束并更改类，使其不会在模糊时恢复到其原始状态。

这样 div 会旋转一次，然后更改其类以保持旋转状态。

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

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

【讨论】：

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

&lt;div class="test"&gt;TEST&lt;/div&gt;

【讨论】：

您好！这正是我想要的。如此简单的解决方案，它运行良好。先生，我真诚地感谢您的帮助。我真的。我当然也把你连根拔起。请问这个CSS解决方案是否有任何缺点？我假设有，因为每个人都坚持使用 jQuery 等？ :) 很抱歉占用您的时间。再次感谢您。非常感谢。
我已经编辑了它，添加了延迟，这样它就不会移动任何东西。我能想到的唯一缺点是，如果您快速取消悬停，初始移动将无法完成。并且可能有些人会觉得这个“hacky”很高兴它有帮助！
专业绅士的专业回应。再次非常感谢您并再次回复以准确解释您所做的事情和潜在的利弊。祝你有美好的一天。

【解决方案5】：

我有一个圆形图标，我想在每次悬停时旋转，而不仅仅是第一次，并且在未悬停时不旋转。

原创

当我的 CSS 看起来像这样时，我发现了这个问题

.icon {
    transition: transform 0.5s;
}

.icon:hover {
    transform: rotate(90deg);
}

解决方案

简单的解决方案是将转换放在:hover psuedo 类中

.icon:hover {
    transition: transform 0.5s;
    transform: rotate(90deg);
}

砰，完成！

这很有效，因为我最初将转换默认设置为 0.5 秒。在这种情况下，这意味着向前和向后。通过将transition 属性放在悬停内，我在悬停时有一个 0.5 秒的过渡，但在图标未悬停时有一个 0 秒的过渡（默认值）。悬停为 0 意味着它会立即弹回原位，对查看者是不可见的。

【讨论】：

【解决方案6】：

对我有用的是不将变换放在悬停上，而是放在主 css 上。

不是：

 #gear {
  width: 3vh;
  height: auto;
  cursor: pointer;
  &:hover {
    transform: rotate(45deg);
    transition: transform 200ms;

  }
}

但是

#gear {
  width: 3vh;
  height: auto;
  cursor: pointer;
  transition: transform 200ms;

  &:hover {
    transform: rotate(45deg);
  }
}

【讨论】：