0

コンテンツが回転して表示されるページがあります。

<div id="viewport">
    <div id="pages">
        <div id="page1" class="page">
            Page 1
        </div>
            ...
        <div id="page6" class="page">
            Page 6
        </div>
    </div>
</div>

そしてcssで

 body{
    font-family: 'Quicksand', sans-serif; //google web font
 }
 #viewport{
    width: 700px;
    height: 446px;
    z-index: 1;
}
#pages{
    -webkit-transform: rotateZ(0deg);
    left: -716px;
    position: relative;
    width: 2094px;
    height: 2010px;
    z-index: -1;
}
#page1 {
    left: 717px;
}
#page2 {
    top: 414px;
    left: 1435px;
    -webkit-transform: rotateZ(60deg);
}

#pages divを回転させます。これは、たとえば firefox (適切なブラウザー プロパティを使用) で正常に機能します。しかし、Chrome (28.0.1500.20 beta-m と 26something、どちらも 64 ビット Windows 7 上) では、フォントが変形したGoogle ドライブのリンクです。Chromeの問題トラッカーでは見つかりませんでした。何か間違ったことをしていますか、それともバグレポートを提出する必要がありますか? 提案をありがとう...

4

1 に答える 1

0

OK 修正が見つかりました

-webkit-backface-visibility:hidden;

私が探していたものでした。まだ ff ほど見栄えはよくありませんが、少なくとも 1 行に収まっています。

于 2013-05-26T14:12:55.993 に答える