≪ Today I learned. RSS購読
公開日
タグ
CSS
著者
ダーシノ

CSSでワードアート風3Dテキストを表示する

テキスト用の要素を複数個用意し、1つずつtranslateZ()で奥方向（Z軸方向）にずらしていくことで、CSSだけでワードアートのような3Dテキスト表現が実現できる。

<section clas="scene">
  <div class="layered">
    <span>Hello World!!</span>

    <div class="layers" aria-hidden="true">
      <div style="--i: 1;">Hello World!!</div>
      <div style="--i: 2;">Hello World!!</div>
      <div style="--i: 3;">Hello World!!</div>
      ...
      <div style="--i: 19;">Hello World!!</div>
      <div style="--i: 20;">Hello World!!</div>
    </div>
  </div>
</section>
.scene {
  * {
    perspective: 400px;
    transform-style: preserve-3d;
  }

  .layered {
    position: relative;
    animation: wobble 12s infinite linear;
  }
  .layers, .layers > div {
    position: absolute;
    inset: 0;
  }
  .layers > div {
    --n: calc(var(--i) / 20);

    /* translateZで奥行きを出す */
    transform: translateZ(calc(var(--i) * 3px));
    color: hsl(100 50% calc(var(--n) * 100%));
  }
}

@keyframes wobble {
  from { transform: rotate(0deg) rotateX(30deg) rotate(360deg); }
  to { transform: rotate(360deg) rotateX(30deg) rotate(0deg); }
}

デモ

Hello World!!

参考