パーツ番号 07-11-12 ・ CSSのみ

タイル分割めくれ画像ギャラリー

画像が6分割のタイルになっており、ホバーすると各タイルが順にめくれるように回転して奥の色柄を見せる演出です。WordPressの特集ページやキャンペーンバナーの目を引くアイキャッチに使えます。

hovercss3d

プレビュー

ソースコード

HTML

<div class="d07-11-12-frame">
          <div class="d07-11-12-tile"></div>
          <div class="d07-11-12-tile"></div>
          <div class="d07-11-12-tile"></div>
          <div class="d07-11-12-tile"></div>
          <div class="d07-11-12-tile"></div>
          <div class="d07-11-12-tile"></div>
        </div>

CSS

.d07-11-12-frame{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:2px;width:210px;height:140px;border-radius:10px;overflow:hidden;perspective:600px}
        .d07-11-12-tile{background:linear-gradient(135deg,#f97316,#ec4899);transition:transform .5s ease,opacity .5s ease;transform-origin:center}
        .d07-11-12-tile:nth-child(1){background:linear-gradient(135deg,#f97316,#ec4899)}
        .d07-11-12-tile:nth-child(2){background:linear-gradient(135deg,#ec4899,#a855f7)}
        .d07-11-12-tile:nth-child(3){background:linear-gradient(135deg,#a855f7,#6366f1)}
        .d07-11-12-tile:nth-child(4){background:linear-gradient(135deg,#6366f1,#0ea5e9)}
        .d07-11-12-tile:nth-child(5){background:linear-gradient(135deg,#0ea5e9,#14b8a6)}
        .d07-11-12-tile:nth-child(6){background:linear-gradient(135deg,#14b8a6,#22c55e)}
        .d07-11-12-frame:hover .d07-11-12-tile{transform:rotateY(180deg) scale(.92);opacity:.55}
        .d07-11-12-frame:hover .d07-11-12-tile:nth-child(odd){transition-delay:.05s}
        .d07-11-12-frame:hover .d07-11-12-tile:nth-child(even){transition-delay:.15s}

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