ちいつる

ホバーエフェクト

カード反転

ホバー（PC）またはタップ（スマホ）でカードがY軸回転して裏面を表示。transform-style: preserve-3d＋backface-visibility: hiddenで実装。

ENGLISH

Flip Card

  • JS
約90行ホバーエフェクト の一覧 →

プレビュー

ホバー

操作カーソルを乗せると動きます（スマホはタップ）。

コード（コピーして使えます）

<div class="fc-scene">
  <div class="fc-card" tabindex="0" role="button" aria-label="カードを反転">
    <div class="fc-face fc-front">
      <div class="fc-front-icon">🎴</div>
      <p class="fc-front-label">ホバーで反転</p>
    </div>
    <div class="fc-face fc-back">
      <p class="fc-back-title">ちいつる</p>
      <p class="fc-back-desc">小さな道具箱。<br>いつでも使えるWebツール集。</p>
    </div>
  </div>
</div>

タグ

関連パーツ