14

親を歪め、子に歪ませたいだけです。

例：HTML 

<div class="parent"> <!-- skew(-10deg) -->
    <div class="child">Hello</div> <!-- skew(10deg) (skew back) -->
</div>

例：CSS

.parent {
    transform: skew(-10deg);
}
.child {
    transform: skew(10deg);
}

中のテキストは、Firefox、Safari で問題ないようです。ただし、ChromeとOperaではなく、少しぼやけています

-webkit-backface-visibility: hidden;Chromeでピクセル化されたボックスを減らすために使用する必要があります

ファイアフォックス :

ファイアフォックス

クロム:

クロム

Firefox 対 Chrome :

FirefoxVSChrome

または Photoshop でズーム

FirefoxVSChromeZoomed

実際の例: http://jsfiddle.net/1tpj1kka/

何か案が ？

ノート ！！！: web-tiki の回答は、問題を防ぐための別の方法です。しかし、このスキューバックの問題を解決するための実際の解決策 (実際の修正) に答えた人がいる場合は、その答えを受け入れます。

4

3 に答える 3

8

Webkit ブラウザーでの 2D または 3D 変換後の「ぼやけたテキスト」については、何度も議論されてきました。ただし、あなたの場合、テキストがskewプロパティの影響を受けないように、疑似要素にのみ変換を適用できます。

また、マークアップでタグを 1 つだけ使用することもできます。

@import url(https://fonts.googleapis.com/css?family=Oswald);
body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;}

.parent {
    width: 300px;
    overflow: hidden;
    padding-left: 5%;
    position:relative;
}

.parent::before {
    content :'';
    position:absolute;
    top:0;left:0;
    width:100%; height:100%;
    background: rgba(90,190,230,0.9);
    transform-origin:0 0;
    transform:skew(-10deg);
    z-index:-1;
}
<div class="parent">
    Hello
</div>

于 2014-12-16T09:53:24.810 に答える
2

以下のように変換の前に「translateZ(0)」を追加すると、GPU にテキストの再レンダリングが強制され、Chrome のぼやけがなくなります。

これ：

transform:  translateZ(0) skew(-10deg);

これではない：

transform: skew(-10deg);
于 2016-01-09T04:48:26.027 に答える