css - 为什么使用 CSS 旋转元素会产生锯齿？

Question

我正在测试 div 的旋转。我注意到当我用 CSS 旋转 div 时，它会产生看起来很尴尬的别名。这是 fiddle :

Fiddle

CSS:

.alaised {
    width:200px;
    height:200px;
    border:2px solid green;
    transform:rotate(-8deg);
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    margin:50px;
}

在 fiddle 中，当 div 旋转时它会出现锯齿，而当它不旋转时悬停时会出现抗锯齿。

如何消除这种行为？我尝试在网上搜索并尝试添加具有相同颜色的小宽度阴影，但它的阴影也有别名。

注意:在更高分辨率的屏幕上不会检测到此行为。但在 1024x768 及更低的分辨率上，这些天最常见的分辨率都会受到影响。

Answer 1

刚刚找到一个方法:http://jsfiddle.net/zGAvZ/1/ (在 fx 18 上试过)

相关CSS

.aliased {
    width:200px;
    height:200px;
    margin:50px;
}

.aliased:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border:2px solid green;
    transform:rotate(-8deg);
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
}

.aliased:hover {
    transform:rotate(8deg);
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);    
}

想法是在正常状态下旋转 :after 伪元素，并在悬停时对元素本身进行相反的旋转。在 Firefox 18 上，即使在悬停状态之后，正方形看起来也不错