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 が回転するとエイリアスが適用され、回転していない場合はホバー時にアンチエイリアスが適用されます。

この動作を削除するにはどうすればよいですか? Webで検索して、同じ色で幅の狭い影を付けてみましたが、その影もエイリアスされています。

注: この動作は、高解像度の画面では検出されません。しかし、最近の最も一般的な解像度である 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 に答える