Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1141" href="#journal"><span class="tbx-1141__name"><small>JOURNAL / 01</small><strong>制作ノート <b>↗</b></strong></span><span class="tbx-1141__flip" aria-label="記事数 24"><span class="tbx-1141__faces"><b>24</b><b>件</b></span></span></a>CSS
.tbx-1141{box-sizing:border-box;width:min(300px,100%);min-height:93px;padding:16px 16px 16px 19px;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#f9f2e6;border:1px solid #e2cbaa;border-radius:10px;text-decoration:none;font-family:system-ui,sans-serif;color:#593e32}
.tbx-1141__name{display:grid;gap:9px}.tbx-1141 small{font-size:9px;letter-spacing:.13em;color:#96715e;font-weight:800}.tbx-1141 strong{font-size:18px}.tbx-1141 strong b{font-weight:400;font-size:19px;color:#a06f51}
.tbx-1141__flip{perspective:400px;width:65px;height:54px;flex:none}.tbx-1141__faces{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.2,.75,.2,1)}.tbx-1141__faces b{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden;border-radius:8px;font-size:24px;background:#5c5140;color:#fff}.tbx-1141__faces b:last-child{transform:rotateX(180deg);background:#a06f51;font-size:20px}
.tbx-1141:is(:hover,:focus-visible) .tbx-1141__faces{transform:rotateX(180deg)}
.tbx-1141:focus-visible{outline:3px solid #aa7753;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1141, .tbx-1141 *, .tbx-1141::before, .tbx-1141::after, .tbx-1141 *::before, .tbx-1141 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。