：ホバリングローテーション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); 

}

を、これはどんな違いがあればまた、それは、フォント素晴らしいアイコンです。

編集：

To everyone on 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

アニメーションを使用します要素がホバリングされたとき（mouseoverイベント）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>

それが両者の間に変換することができますように、あなたはまた、あなたの要素の定期的なCSSに初期 transform状態を必要とする

Answer 2

定義された状態：

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