Html 徽标旋转时会变成像素化

如果您将鼠标悬停在页面左下角的徽标上，当您将鼠标悬停在徽标上时，它将变成超级像素

我正在使用

变换：旋转（360度）这是一个

通常，您可以通过向旋转的元素添加
-webkit backface visibility:hidden
来克服此问题。不过，在您的示例中，它将完全删除抗锯齿

这是因为您使用的是
transition
而不是
transform
，因此为了解决此问题，您宁愿将
outline:1px solid transparent
添加到图像的CSS中。这将解决问题


img{
宽度：21px；
高度：21px；
-webkit转换：-webkit转换0.6s易入易出；
转换：转换0.6s易入易出；
外形：1px实心透明；
}
img：悬停{
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
这是一个

通常，您可以通过向旋转的元素添加
-webkit backface visibility:hidden
来克服此问题。不过，在您的示例中，它将完全删除抗锯齿

这是因为您使用的是
transition
而不是
transform
，因此为了解决此问题，您宁愿将
outline:1px solid transparent
添加到图像的CSS中。这将解决问题


img{
宽度：21px；
高度：21px；
-webkit转换：-webkit转换0.6s易入易出；
转换：转换0.6s易入易出；
外形：1px实心透明；
}
img：悬停{
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
这是因为你正在将你的
图像
转换为
变换：旋转（360度）
，而不是该目标，您可以创建父元素
.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{
位置：固定；
底部：0；
右：1；
宽度：21px；
高度：21px；
-webkit转换：-webkit转换0.6s易入易出；
转换：转换0.6s易入易出；
}
img{
宽度：100%；
身高：100%；
}
.社交媒体：悬停{
变换：旋转（360度）；
}
这是因为你正在将你的
图像
转换为
变换：旋转（360度）
，而不是该目标，您可以创建父元素
.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{
位置：固定；
底部：0；
右：1；
宽度：21px；
高度：21px；
-webkit转换：-webkit转换0.6s易入易出；
转换：转换0.6s易入易出；
}
img{
宽度：100%；
身高：100%；
}
.社交媒体：悬停{
变换：旋转（360度）；
}

浏览器会这样做，因此如果您尝试
outline:none在您的徽标css中？浏览器会这样做，以便在您尝试
outline:none在你的徽标css中？哦，这真的比我的解决方案好，很好+1是@modiX，谢谢，因为当我们旋转图像时，没有任何悬停效果，然后你检查，它的边界仍然是像素。而不是当把它们放在div中时。哦，这真的比我的解决方案好，很好+1是@modiX，谢谢，因为当我们旋转图像时，没有任何悬停效果，然后你检查，它的边界仍然是像素。然而，当将它们放入div时，则不是。