DEMO
CODE
<div class="demo-stage"><div class="fc-card"><div class="fc-inner"><div class="fc-front">HOVER</div><div class="fc-back">3D回転で裏面が現れるフリップカード</div></div></div></div>
.demo-stage { display:flex; align-items:center; justify-content:center; padding:2.5rem; }
.fc-card { width:230px; height:300px; perspective:1100px; cursor:pointer; }
.fc-inner { position:relative; width:100%; height:100%; transition:transform .75s cubic-bezier(.4,0,.2,1); transform-style:preserve-3d; }
.fc-card:hover .fc-inner { transform:rotateY(180deg); }
.fc-front, .fc-back { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.fc-front { background:#1A1A1A; color:#fff; font-family:'Oswald',sans-serif; font-size:1.6rem; letter-spacing:.25em; }
.fc-back { background:#E91B89; color:#fff; transform:rotateY(180deg); padding:2rem; text-align:center; font-size:.95rem; line-height:1.7; }
AI PROMPT
ホバーで3D回転するフリップカードを作って。親にperspective:1100px、.fc-innerにtransform-style:preserve-3d、ホバーでrotateY(180deg)を.75s cubic-bezier。表裏2面はposition:absolute+inset:0+backface-visibility:hidden、裏面は初期rotateY(180deg)。表は黒、裏はピンク。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
ホバーで3D回転して裏面を見せるフリップカード。商品紹介・プロフィール・FAQに使える定番効果。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
商品カード・記事一覧・料金プラン・チームメンバー紹介など、カード型UIの一覧表示に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。