CODEWITHSUNDEEP
htmlcss
WingsFromBF
WingsFromBF

Reputation: 1

Logo becomes pixelated when it spins

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?

Upvotes: 0

Views: 116

Answers (2)

frnt
frnt

Reputation: 8795

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>

Upvotes: 2

Martin Braun
Martin Braun

Reputation: 12619

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

Upvotes: 0

Related Questions