Question

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

我正在使用

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>

＆＃13;

Class someClass
{
    private $data = [];

    public function createReport(){
        $data = $this->data;
        ...
    }
    public function loadJobPanels($TestId){
        ...
        $this->data = $data;
    }
}

＆＃13;

.missing-words__draggable { white-space: nowrap;}

＆＃13;

Answer 2

这是known problem on Google Chrome。

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

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

＆＃13;

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);
  }

＆＃13;

<img id="ello" src="http://jasperalani.com/images/ello_icon.png">

＆＃13;

徽标在旋转时变得像素化

2 个答案: