Logo becomes pixelated when it spins - html

Question

http://jasperalani.com/
If you hover over the logo at the bottom left of the page it becomes super pixelated when you hover over it.
I am using
transform: rotate(360deg);
How can I fix this so it maintains its quality?

Answer 1

That's because you are making you image to transform:rotate(360deg);, instead of that target you parent element .socialmedia and try it works.
.socialmedia {
position: fixed;
bottom: 0;
right: 1;
width:21px;
height:21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
img{
width: 100%;
height: 100%;
}
.socialmedia:hover{
transform:rotate(360deg);
}
.socialmedia {
position: fixed;
bottom: 0;
right: 1;
width:21px;
height:21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
img{
width: 100%;
height: 100%;
}
.socialmedia:hover{
transform:rotate(360deg);
}
<div class="socialmedia">
<a href="https://ello.co/jasperalani">
<img id="ello" src="http://jasperalani.com/images/ello_icon.png">
</a>
</div>

Answer 2

This is a known problem on Google Chrome.
Usually, you can overcome the problem by adding -webkit-backface-visibility: hidden to your element you rotate. In your example it will remove the anti aliasing entirely, though.
This is, because you are using transition instead of transform, so to fix the problem you rather add outline: 1px solid transparent to the CSS of your image. This will solve the problem.
img {
width: 21px;
height: 21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
outline: 1px solid transparent;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<img id="ello" src="http://jasperalani.com/images/ello_icon.png">