html - Logo 在旋转时变得像素化

Question

http://jasperalani.com/ 如果您将鼠标悬停在页面左下角的 Logo 上，当您将鼠标悬停在该 Logo 上时，它会变得 super 像素化。

我正在使用

transform: rotate(360deg);

我该如何解决这个问题以保持其质量？

Answer 1

那是因为你正在让你的 image 变成 transform:rotate(360deg);，而不是你的 parent 元素 .socialmedia 并尝试它的工作。

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