パーツ番号 08-05-09 ・ CSSのみ

3Dめくれるロゴ演出

ホバーするとロゴがY軸方向に回転し、裏面のメッセージに切り替わります。ヘッダーロゴやウェルカムページの遊び心のある演出に使えます。

hovercss3d

プレビュー

ソースコード

HTML

<div class="d08-05-09-stage">
          <div class="d08-05-09-logo">
            <div class="d08-05-09-face d08-05-09-front">LOGO</div>
            <div class="d08-05-09-face d08-05-09-back">ご来店<br>ありがとうございます</div>
          </div>
        </div>

CSS

.d08-05-09-stage{perspective:600px}
        .d08-05-09-logo{position:relative;width:150px;height:74px;transform-style:preserve-3d;transition:transform .8s ease}
        .d08-05-09-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:8px;display:flex;align-items:center;justify-content:center;text-align:center}
        .d08-05-09-front{background:#111827;color:#fff;font-size:22px;font-weight:800;letter-spacing:.08em}
        .d08-05-09-back{background:linear-gradient(135deg,#f43f5e,#fb7185);color:#fff;font-size:11px;line-height:1.6;transform:rotateY(180deg);padding:8px}
        .d08-05-09-stage:hover .d08-05-09-logo{transform:rotateY(180deg)}

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