2

我在 div 上测试旋转。我注意到当我用 CSS 旋转 div 时，它会产生看起来很尴尬的锯齿。这是小提琴：

小提琴

CSS：

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

在小提琴中，当 div 旋转时，它会产生锯齿，并且在不旋转时悬停，抗锯齿。

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

注意：在更高分辨率的屏幕上未检测到此行为。但是在 1024x768 和更少的分辨率下，这些天最常见的分辨率会受此影响。

4

1 回答 1

0

刚刚找到一种方法： 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 上，即使在悬停状态之后，正方形看起来也不错

于 2013-01-25T16:13:56.200 回答