Question

我在悬停时用CSS旋转一个物体，并希望它在你取消它时保持在它的新位置。我一直在寻找，但我唯一能找到的是css :hover rotate element and keep the new position，这似乎超越了它。

这种效果是否可以纯粹用CSS实现？一旦你停止悬停，我希望图标保持在180位置。

我使用了这段代码：

sourceSets

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

编辑 - 适用于其他所有需要的人的简易CSS解决方案（摘自评论）：

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

Answer 1

我想要一个纯CSS解决方案，你可以设置转换时间以回到基本状态。

它永远不会，但它对大多数用户来说非常接近：

＆＃13;

python module.py

＆＃13;

.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;
}

＆＃13;

Answer 2

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

＆＃13;

var rect = document.querySelector('.rectangle')

function rotate() {
  this.classList.add('rotate');
  
  rect.removeEventListener('mouseover', rotate);
}

rect.addEventListener('mouseover', rotate);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

您还需要在元素的常规CSS中使用初始transform状态，以便它可以在两个已定义的状态之间进行转换：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

如果你想保持旋转状态，你可能不得不使用一个小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>

Answer 5

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

原始

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

.icon {
    transition: transform 0.5s;
}

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

解决方案

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

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

繁荣，完成！

这行得通，因为我最初将过渡默认设置为0.5s。在这种情况下，这意味着向前和向后。通过将transition属性放在悬停中，激活悬停时我将有0.5s的过渡，而当图标未悬停时我将有0s的过渡（默认）。悬停为0意味着它会立即回到观看者看不见的位置。

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

5 个答案:

繁荣，完成！