HTML image moves to right when it should rotate - html

Question

Can someone please tell me why my icon just moves to the right when it's supposed to rotate?
.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
Since I am quite new to HTML I can't get it why I doesn't rotate even it should.
My goal is to get a icon on the lower left icon which rotates on hover.
Thanks for your answers.

Answer 1

You can't use this:
transform: translate(-50%, -50%);
It's override this: -transform: rotate(-360deg); so you doesn't have good position element.
You should move transform: translate(-50%, -50%); to parent element if you want rotate your element as you write in your question.

Answer 2

Your are applying two transition on single item, which ins't letting rotate work,
remove
transform: translate(-50%, -50%); from img style rule, and it works like you would expect.
Here is a fiddle for you

Answer 3

You're overwriting translate() when you redefine transform with rotate() on hover. Combine those two transform properties and set an initial rotate() to transition from.
.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: translate(-50%, -50%) rotate(-360deg);
-moz-transform: translate(-50%, -50%) rotate(-360deg);
transform: translate(-50%, -50%) rotate(-360deg);
}
img{
position:absolute;
top: 95vh;
left:10%;
transform: translate(-50%, -50%) rotate(0deg) ;
}
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/2149-200.png" class="rotate-icon">