：懸停旋轉CSS保持位置發現

Question

:)非常感謝您的時間夥計。

我在懸停時用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); 

}

Answer 1

使用動畫，並在元素懸停時使用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>

Answer 2

你還需要在你的元素經常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>

Answer 3

如果要保持旋轉狀態，則可能必須使用一個小JQuery來檢查轉換何時結束並更改該類，以便在模糊時不會恢復爲其原始狀態。

這樣div旋轉一次，然後改變它的類以保持旋轉狀態。

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

 
\t \t $(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 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; 
 
}

<div class="test">TEST</div>