パーツ番号 02-02-03 ・ CSSのみ

3D回転テキスト

見出しがX軸で奥から回り込みながら登場し、静止後にゆっくり揺れ続けます。WordPressのセクションタイトルに立体的なインパクトを与えます。

css3d

プレビュー

ソースコード

HTML

<div class="d02-02-03-stage"><h4 class="d02-02-03-txt">DEPTH</h4></div>

CSS

.d02-02-03-stage{perspective:600px}
        .d02-02-03-txt{margin:0;font-size:48px;font-weight:900;color:#4338ca;transform-style:preserve-3d;animation:d183rot 5s ease-in-out infinite}
        @keyframes d183rot{
          0%{transform:rotateX(-90deg);opacity:0}
          25%{transform:rotateX(0deg);opacity:1}
          60%{transform:rotateX(12deg)}
          80%{transform:rotateX(-8deg)}
          100%{transform:rotateX(0deg);opacity:1}
        }

クラス名 .d02-02-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。