Question

我在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以及更少的时候，这是目前最常见的分辨率。

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上，即使在悬停状态

之后，方块看起来也很不错

为什么使用CSS旋转元素会产生别名？

1 个答案: