回転させるときにHTML画像が右に移動する

Question

誰かが私のアイコンが回転すると右に移動する理由を教えてもらえますか？

.rotate-icon{ 
    display: inline-block; 
    -webkit-transition: -webkit-transform 0.6s ease-out; 
    -moz-transition: -moz-transform 0.6s ease-out; 
    -transition: -transform 0.6s ease-out; 
} 
.rotate-icon:hover{ 
    display: inline-block; 
-webkit-transform: rotate(-360deg); 
-moz-transform: rotate(-360deg); 
-transform: rotate(-360deg); 
} 
img{ 
position:absolute; 
top: 95vh; 
left:10%; 
transform: translate(-50%, -50%); 
} 

JSfiddle

私は、私もそれをすべき回転しない理由を、私はそれを得ることができないHTMLにはかなり新しいですので。 私の目標は、ホバー上で回転する左下のアイコンにアイコンを取得することです。

ご回答ありがとうございます。

Answer 1

あなたは、IMGのスタイルルールから transform: translate(-50%, -50%);を削除し、あなたが期待するようにそれが動作 、回転作業をさせるins't単一の項目、上の2つの遷移を適用しています。ここで

あなたがホバーにrotate()でtransformを再定義するときは、translate()を上書きしています

Answer 2

あなたはこれを使用することはできません：あなたは良い位置要素を持っていないので、-transform: rotate(-360deg);：

transform: translate(-50%, -50%); 

それは、このメソッドをオーバーライドだが。

質問に書いているときに要素を回転させたい場合は、transform: translate(-50%, -50%);を親要素に移動する必要があります。

Answer 3

ためfiddleです。これらの2つのプロパティを組み合わせて、rotate()の初期値をfromに設定します。

.rotate-icon{ 
 
    display: inline-block; 
 
\t -webkit-transition: -webkit-transform 0.6s ease-out; 
 
\t -moz-transition: -moz-transform 0.6s ease-out; 
 
\t transition: transform 0.6s ease-out; 
 
} 
 
.rotate-icon:hover{ 
 
    display: inline-block; 
 
\t -webkit-transform: translate(-50%, -50%) rotate(-360deg); 
 
\t -moz-transform: translate(-50%, -50%) rotate(-360deg); 
 
\t transform: translate(-50%, -50%) rotate(-360deg); 
 
} 
 
img{ 
 
\t position:absolute; 
 
\t top: 95vh; 
 
\t left:10%; 
 
    transform: translate(-50%, -50%) rotate(0deg) ; 
 
}

<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2149-200.png" class="rotate-icon">