Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1164" href="#product"><span class="tbx-1164__fold" aria-hidden="true"><span class="tbx-1164__front">✦</span><span class="tbx-1164__back">100%<br>COTTON</span></span><span class="tbx-1164__meta"><small>FABRIC COLLECTION / 03</small><strong>Everyday Linen</strong><span>Discover the material <b>→</b></span></span></a>
CSS
.tbx-1164{box-sizing:border-box;display:flex;align-items:center;gap:17px;width:286px;max-width:100%;padding:17px 15px;border-radius:12px;border:1px solid #e2d5c7;background:#fcf7f0;color:#493c31;text-decoration:none;font-family:system-ui,sans-serif}.tbx-1164__fold{display:block;position:relative;width:96px;height:112px;flex-shrink:0;perspective:500px}.tbx-1164__front,.tbx-1164__back{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;border-radius:3px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.tbx-1164__front{background:repeating-linear-gradient(93deg,#eacaa8,#eacaa8 3px,#e2b992 4px,#ebcba8 6px);border:1px solid #d6b391;font:40px Georgia,serif;color:#b9845a;box-shadow:3px 5px 12px #a77e5632}.tbx-1164__back{background:#c2d9c7;color:#33564c;border:1px solid #87ab9c;transform:rotateY(180deg);font:850 12px/1.45 system-ui,sans-serif;text-align:center;letter-spacing:.08em}.tbx-1164__meta{display:flex;flex-direction:column;gap:10px;min-width:0}.tbx-1164__meta small{font-size:8px;letter-spacing:.1em;font-weight:850;color:#9c7b62}.tbx-1164__meta strong{font:600 21px/1 Georgia,serif}.tbx-1164__meta span{font-size:10px;line-height:1.3;color:#6c655f;font-weight:700}.tbx-1164__meta b{display:inline-block;transition:transform .35s}.tbx-1164:is(:hover,:focus-visible) .tbx-1164__front{transform:rotateY(-180deg)}.tbx-1164:is(:hover,:focus-visible) .tbx-1164__back{transform:rotateY(0)}.tbx-1164:is(:hover,:focus-visible) .tbx-1164__meta b{transform:translateX(5px)}.tbx-1164:focus-visible{outline:3px solid #376b68;outline-offset:4px}
@media (prefers-reduced-motion: reduce) {.tbx-1164, .tbx-1164 *, .tbx-1164::before, .tbx-1164::after, .tbx-1164 *::before, .tbx-1164 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Ecommerce / Product
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。