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

你所申請的單項兩個過渡，這ins't讓旋轉工作， 從IMG風格規則中刪除 transform: translate(-50%, -50%);，和它的作品像你期望的那樣。

這裏是你

Answer 2

您不能使用此：

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

它覆蓋此：-transform: rotate(-360deg);，所以你沒有很好的位置元素。

如果你想在你的問題中寫下你想旋轉的元素，你應該將transform: translate(-50%, -50%);移動到父元素。

Answer 3

一個fiddle你覆蓋translate()當你rotate()懸停重新定義transform。結合這兩個transform屬性並設置一個初始的rotate()以從中過渡。

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