パーツ番号 02-11-05 ・ CSSのみ

3Dキューブワードスイッチ

立方体が転がるように面が切り替わり、各面に置いた単語が順番に現れ続けます。WordPressのサービス一覧見出しに立体的な遊び心を加えられます。

css3d

プレビュー

ソースコード

HTML

<div class="d02-11-05-scene">
          <div class="d02-11-05-cube">
            <div class="d02-11-05-face">PLAN</div>
            <div class="d02-11-05-face">DESIGN</div>
            <div class="d02-11-05-face">BUILD</div>
            <div class="d02-11-05-face">LAUNCH</div>
          </div>
        </div>

CSS

.d02-11-05{background:#111827}
        .d02-11-05-scene{perspective:600px;width:180px;height:56px}
        .d02-11-05-cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:d1175spin 8s cubic-bezier(.85,0,.15,1) infinite}
        .d02-11-05-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
          font-size:19px;font-weight:900;color:#fff;border-radius:8px;backface-visibility:hidden}
        .d02-11-05-face:nth-child(1){background:#6366f1;transform:rotateX(0deg) translateZ(28px)}
        .d02-11-05-face:nth-child(2){background:#8b5cf6;transform:rotateX(90deg) translateZ(28px)}
        .d02-11-05-face:nth-child(3){background:#ec4899;transform:rotateX(180deg) translateZ(28px)}
        .d02-11-05-face:nth-child(4){background:#f59e0b;transform:rotateX(270deg) translateZ(28px)}
        @keyframes d1175spin{
          0%,20%{transform:rotateX(0deg)}
          25%,45%{transform:rotateX(-90deg)}
          50%,70%{transform:rotateX(-180deg)}
          75%,95%{transform:rotateX(-270deg)}
          100%{transform:rotateX(-360deg)}
        }
        @media (prefers-reduced-motion: reduce){
          .d02-11-05-cube{animation:none}
        }

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