css - 3d 立方体の選択した側面のぼやけたテキスト

Question

すべての面にテキストを含む立方体を作成しようとしていますが、一部の面でテキストがぼやけて表示されます。簡単なグーグル検索の後-webkit-font-smoothing: subpixel-antialiased、含まれている要素に追加すると問題が解決することがわかりましたが、私にとっては解決していないようです。1 面と 2 面はきれいにクリアですが、残りの 4 面はぼやけています。誰かがこれを理解するのを手伝ってくれたら本当にありがたい..私はjsfiddleをまとめました.コードは以下の通りです. 前もって感謝します！

フィドル

HTML:

<div id="options">
  <ul id="nav">
    <li id="front" class="show-front">Show 1</li>
    <li id="back" class="show-back">Show 2</li>
    <li id="right" class="show-right">Show 3</li>
    <li id="left" class="show-left">Show 4</li>
    <li id="top" class="show-top">Show 5</li>
    <li id="bottom" class="show-bottom">Show 6</li>
  <ul>
</div>

<div class="container">
  <div id="cube" class="show-right">
    <div class="side front"><h2>This is side 1</h2></div>
      <div class="side back"><h2>This is side 2</h2></div>
      <div class="side right"><h2>This is side 3</h2></div>
      <div class="side left"><h2>This is side 4</h2></div>
      <div class="side top"><h2>This is side 5</h2></div>
      <div class="side bottom"><h2>This is side 6</h2></div>
    </div>
  </div>

CSS:

#nav {
    list-style: none;
}
#nav li:hover {
    cursor: pointer;
}
.container {
    width: 600px;
    height: 600px;
    position: relative;
    margin: 1em 1em 1em 2em;
    float: left;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}

.container #cube {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -ms-transition: -ms-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s
}

.container #cube .side {
    background: black;
    margin: 0px;
    display: block;
    position: absolute;
    width: 596px;
    height: 596px;
    color: white;
    border-radius: 5px;
    box-shadow: 0 0 15px black;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.container #cube .front {
    -webkit-transform: translateZ(300px);
    -moz-transform: translateZ(300px);
    -ms-transform: translateZ(300px);
    -o-transform: translateZ(300px);
    transform: translateZ(300px);
}

.container #cube .back {
    -webkit-transform: rotateX(-180deg) translateZ(300px);
    -moz-transform: rotateX(-180deg) translateZ(300px);
    -ms-transform: rotateX(-180deg) translateZ(300px);
    -o-transform: rotateX(-180deg) translateZ(300px);
    transform: rotateX(-180deg) translateZ(300px);
}

.container #cube .right {
    -webkit-transform:rotateY(90deg) translateZ(300px);
    -moz-transform:rotateY(90deg) translateZ(300px);
    -ms-transform:rotateY(90deg) translateZ(300px);
    -o-transform:rotateY(90deg) translateZ(300px);
    transform:rotateY(90deg) translateZ(300px);
}

.container #cube .left {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
    -moz-transform: rotateY(-90deg) translateZ(300px);
    -ms-transform: rotateY(-90deg) translateZ(300px);
    -o-transform: rotateY(-90deg) translateZ(300px);
    transform: rotateY(-90deg) translateZ(300px);
}

.container #cube .top {
    -webkit-transform: rotateX(90deg) translateZ(300px);
    -moz-transform: rotateX(90deg) translateZ(300px);
    -ms-transform: rotateX(90deg) translateZ(300px);
    -o-transform: rotateX(90deg) translateZ(300px);
    transform: rotateX(90deg) translateZ(300px);
}

.container #cube .bottom {
    -webkit-transform: rotateX(-90deg) translateZ(300px);
    -moz-transform: rotateX(-90deg) translateZ(300px);
    -ms-transform: rotateX(-90deg) translateZ(300px);
    -o-transform: rotateX(-90deg) translateZ(300px);
    transform: rotateX(-90deg) translateZ(300px);
}

.container #cube.show-front {
    -webkit-transform: translateZ(-300px);
    -moz-transform: translateZ(-300px);
    -ms-transform: translateZ(-300px);
    -o-transform: translateZ(-300px);
    transform: translateZ(-300px);
}

.container #cube.show-back {
    -webkit-transform: translateZ(-300px) rotateX(-180deg);
    -moz-transform: translateZ(-300px) rotateX(-180deg);
    -ms-transform: translateZ(-300px) rotateX(-180deg);
    -o-transform: translateZ(-300px) rotateX(-180deg);
    transform: translateZ(-300px) rotateX(-180deg);
}

.container #cube.show-right {
    -webkit-transform: translateZ(-300px) rotateY(-90deg);
    -moz-transform: translateZ(-300px) rotateY(-90deg);
    -ms-transform: translateZ(-300px) rotateY(-90deg);
    -o-transform: translateZ(-300px) rotateY(-90deg);
    transform: translateZ(-300px) rotateY(-90deg);
}

.container #cube.show-left {
    -webkit-transform: translateZ(-300px) rotateY(90deg);
    -moz-transform: translateZ(-300px) rotateY(90deg);
    -ms-transform: translateZ(-300px) rotateY(90deg);
    -o-transform: translateZ(-300px) rotateY(90deg);
    transform: translateZ(-300px) rotateY(90deg);
}

.container #cube.show-top {
    -webkit-transform: translateZ(-300px) rotateX(-90deg);
    -moz-transform: translateZ(-300px) rotateX(-90deg);
    -ms-transform: translateZ(-300px) rotateX(-90deg);
    -o-transform: translateZ(-300px) rotateX(-90deg);
    transform: translateZ(-300px) rotateX(-90deg);
}

.container #cube.show-bottom {
    -webkit-transform: translateZ(-300px) rotateX(90deg);
    -moz-transform: translateZ(-300px) rotateX(90deg);
    -ms-transform: translateZ(-300px) rotateX(90deg);
    -o-transform: translateZ(-300px) rotateX(90deg);
    transform: translateZ(-300px) rotateX(90deg);
}

score 1 · Accepted Answer

この質問によると、注目すべき興味深い点は、WebKit がテキストをベクトルではなく、変換後のテクスチャとして解釈することです。したがって、最初にレンダリングされるテキストにはベクトルレンダリングの利点があり、その後のテキストレンダリングはテクスチャとしてレンダリングされます。

フォントを拡大してから、-webkit-transform: scale を使用して人為的に縮小してみてください。これにより、本質的に高解像度のテクスチャが作成されます。私はあなたをでたらめにするつもりはなく、私がこの解決策を思いついたと言うつもりはありません（クレジットはDuopixelに送られます）が、私はあなたの fiddle を更新しました。可能であれば、サンセリフフォントを使用するようにしてください。これは、セリフ体よりもスケーリングの問題に対して回復力がある傾向があるためです (ただし、これは必ずしも信頼できるとは限りません)。上記の例では、Arial を使用しました。ヘッダーに適用されるコードは次のとおりです。

h2 {
    font-family: 'Arial';
    font-size: 120px;
    font-weight: 100;
    text-align: center;
    -webkit-transform: scale(.5);
}

頑張ってください！

css - 3d 立方体の選択した側面のぼやけたテキスト

1 に答える 1

Related

Reference