logo标签列表

:hover 旋转 CSS 在展示时保持位置不变

csscss-transforms
5
我正在使用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);
}

此外，如果这个图标使用了font-awesome字体库，那么这也可能对后续操作产生影响。

编辑 - 对于其他需要解决此问题的人来说，以下是一个简单的CSS解决方案（摘自评论）：

.lovernehovermarket i.fa.fa-rocket { 
    transform: rotate(0deg);
    transition: transform 999s;
}
如果你旋转了 360 度，那么“新位置”不就和起始位置相同了吗？ - Michael Coker
你好，非常感谢。很抱歉那个例子不太好 - 那个完美地工作了。我有三个图标，其中一个只旋转180度，当我移动鼠标悬停时它会回到原位。所以我希望找到一种简单的方法让它在我移动鼠标后保持在180度的角度上。感谢您指出这一点，真是太棒了。我马上进行编辑。 - eMikkelsen
6个回答
3

我有一个圆形的图标，我希望它在每次悬停时都旋转，而不仅仅是第一次悬停，当未悬停时不旋转。

原文

当我有这样的CSS时，我遇到了这个问题。

.icon {
    transition: transform 0.5s;
}

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

解决方案

简单的解决方案是将过渡效果放在:hover伪类里面。

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

完成了!

这个操作成功是因为我最初默认设置了0.5秒的转换时间。在这种情况下，转换向前和向后都是0.5秒。现在，在悬停时将transition属性放在内部，当悬停被激活时，我有一个0.5秒的过渡，但是当图标未悬停时，它是0秒的过渡（默认设置）。这意味着没有悬停效果，只会立即无形地回到位置。

1
如果您想要一个纯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>

你好！这正是我一直在寻找的。如此简单的解决方案，而且完美地运作着。非常感谢您的帮助，先生。我真的很感激。当然，我也打扰了您。我可以问一下，仅使用CSS解决方案是否存在任何缺点？我假设有，因为每个人都坚持使用jQuery等等？ :)抱歉浪费您的时间。再次感谢您。非常感谢。 - eMikkelsen
我已经编辑过了，添加了一个延迟，这样它就不会移动任何东西。唯一的缺点是，如果你快速取消悬停，初始移动将无法完成。可能有些人会觉得这种方法有些“hacky”。很高兴它能帮到你！ - vals
专业绅士的回复。再次感谢您，再次回复并解释您所做的事情以及可能的优缺点。祝您有美好的一天。 - eMikkelsen
0
我的解决方法是将 transform 不是放在 hover 上，而是放在主要的 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);
  }
}
0
使用动画，并使用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>

你好！非常感谢您的帮助，我真的很感激。我在原始帖子中打了一个小错字，对此我深表歉意。它不是旋转360度，而是旋转180度，我希望当您移除悬停时，它可以保持在新的180度角度。因此，图标从指向上方开始，然后当您将鼠标悬停在其上时，它会指向下方。但是，一旦我移除悬停，它又会指向上方。 - eMikkelsen
@eMikkelsen，请看一下我的回答，它会在鼠标移出时将元素倒置，并且不会再次进行动画。 - Mauro
0
您还需要在元素的常规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>

0
如果您想保持旋转状态，可能需要使用一些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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接