コピペで使えるフリップカード20個まとめ（マウスを乗せると裏返るカード）

カードにマウスを乗せると、くるっと裏返って別の情報が現れる。そんな「フリップカード」は、限られたスペースでたくさんの情報を見せたい時に便利です。

この記事では、コピペするだけで使えるフリップカードを20個まとめました。
定番の横回転から、縦回転、クイズカード、プロフィールカード、実績紹介、ふわっと切り替わるタイプまで、場面ごとに使い分けられる種類を用意しています。

どれもHTMLとCSSだけで動くので、JavaScriptは必要ありません。
これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

カードが裏返るの？ちょっと楽しそう！

うん、パソコンではマウスを乗せると、スマホではタップすると裏返るんだ。それぞれのカードで試してみてね。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、カードを表示したい場所に貼り付けます。

表面の内容は「〇〇-front」、裏面の内容は「〇〇-back」のdivタグの中に書き込みます。
外側のdivタグに付いている「tabindex=”0″」は、スマホのタップで裏返すためのものなので、消さずに残しておいてください。

01. 定番の横回転カード

マウスを乗せると横にくるっと回って、裏面が現れる定番のタイプです。

実際の見た目

表面
裏面の説明文がここに入ります

HTMLコード

<div class="kts-flip01" tabindex="0">
  <div class="kts-flip01-inner">
    <div class="kts-flip01-front">表面</div>
    <div class="kts-flip01-back">裏面の説明文がここに入ります</div>
  </div>
</div>

CSSコード

.kts-flip01 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip01-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip01:hover .kts-flip01-inner, .kts-flip01:focus .kts-flip01-inner { transform: rotateY(180deg); }
.kts-flip01-front, .kts-flip01-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip01-back { transform: rotateY(180deg); }
.kts-flip01-front, .kts-flip01-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip01-front { background: #2563EB; color: #fff; font-size: 20px; font-weight: 700; }
.kts-flip01-back { background: #EFF6FF; color: #1E3A8A; font-size: 14px; }

02. 縦回転のカード

上下方向にくるっと回る、少し意外性のあるタイプです。

実際の見た目

縦に回ります
裏面の説明文がここに入ります

HTMLコード

<div class="kts-flip02" tabindex="0">
  <div class="kts-flip02-inner">
    <div class="kts-flip02-front">縦に回ります</div>
    <div class="kts-flip02-back">裏面の説明文がここに入ります</div>
  </div>
</div>

CSSコード

.kts-flip02 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip02-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip02:hover .kts-flip02-inner, .kts-flip02:focus .kts-flip02-inner { transform: rotateX(180deg); }
.kts-flip02-front, .kts-flip02-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip02-back { transform: rotateX(180deg); }
.kts-flip02-front, .kts-flip02-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip02-front { background: #10B981; color: #fff; font-size: 18px; font-weight: 700; }
.kts-flip02-back { background: #ECFDF5; color: #065F46; font-size: 14px; }

03. クイズ・問題カード

表に問題、裏に答えを書いた、クイズや学習コンテンツ向けのタイプです。

実際の見た目

QGoogleフォームの回答をまとめて見られるのは？
Aスプレッドシート連携

HTMLコード

<div class="kts-flip03" tabindex="0">
  <div class="kts-flip03-inner">
    <div class="kts-flip03-front"><span class="kts-flip03-q">Q</span>Googleフォームの回答をまとめて見られるのは？</div>
    <div class="kts-flip03-back"><span class="kts-flip03-a">A</span>スプレッドシート連携</div>
  </div>
</div>

CSSコード

.kts-flip03 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip03-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip03:hover .kts-flip03-inner, .kts-flip03:focus .kts-flip03-inner { transform: rotateY(180deg); }
.kts-flip03-front, .kts-flip03-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip03-back { transform: rotateY(180deg); }
.kts-flip03-front, .kts-flip03-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip03-front { background: #fff; border: 2px solid #F59E0B; color: #78350F; font-size: 15px; font-weight: 700; }
.kts-flip03-back { background: #F59E0B; color: #fff; font-size: 18px; font-weight: 800; }
.kts-flip03-q, .kts-flip03-a { display: block; margin-bottom: 6px; font-size: 26px; font-weight: 800; }
.kts-flip03-q { color: #F59E0B; }

04. プロフィールカード

表に名前、裏に自己紹介を書いた、スタッフ紹介向けのタイプです。

実際の見た目

🐶チョコアシスタント
好きなことはお散歩とおやつ。わからないことは何でも質問します！

HTMLコード

<div class="kts-flip04" tabindex="0">
  <div class="kts-flip04-inner">
    <div class="kts-flip04-front"><span class="kts-flip04-icon">🐶</span><span class="kts-flip04-name">チョコ</span><span class="kts-flip04-role">アシスタント</span></div>
    <div class="kts-flip04-back">好きなことはお散歩とおやつ。わからないことは何でも質問します！</div>
  </div>
</div>

CSSコード

.kts-flip04 { width: 220px; height: 240px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip04-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip04:hover .kts-flip04-inner, .kts-flip04:focus .kts-flip04-inner { transform: rotateY(180deg); }
.kts-flip04-front, .kts-flip04-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip04-back { transform: rotateY(180deg); }
.kts-flip04-front, .kts-flip04-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip04-front { background: #FFF7ED; border: 1px solid #FED7AA; color: #7C2D12; }
.kts-flip04-back { background: #EA580C; color: #fff; font-size: 14px; line-height: 1.7; }
.kts-flip04-icon { width: 72px; height: 72px; line-height: 72px; margin-bottom: 10px; border-radius: 50%; background: #FED7AA; font-size: 38px; }
.kts-flip04-name { font-size: 18px; font-weight: 800; }
.kts-flip04-role { margin-top: 4px; font-size: 12px; color: #9A3412; }

05. 商品と価格のカード

表に商品名、裏に価格や説明を書いた、ネットショップ向けのタイプです。

実際の見た目

季節のブレンド茶マウスを乗せて価格を見る
1,280円送料無料・ギフト包装OK

HTMLコード

<div class="kts-flip05" tabindex="0">
  <div class="kts-flip05-inner">
    <div class="kts-flip05-front"><span class="kts-flip05-big">季節のブレンド茶</span><span class="kts-flip05-small">マウスを乗せて価格を見る</span></div>
    <div class="kts-flip05-back"><span class="kts-flip05-big">1,280円</span><span class="kts-flip05-small">送料無料・ギフト包装OK</span></div>
  </div>
</div>

CSSコード

.kts-flip05 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip05-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip05:hover .kts-flip05-inner, .kts-flip05:focus .kts-flip05-inner { transform: rotateY(180deg); }
.kts-flip05-front, .kts-flip05-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip05-back { transform: rotateY(180deg); }
.kts-flip05-front, .kts-flip05-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip05-front { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); color: #064E3B; }
.kts-flip05-back { background: #065F46; color: #fff; }
.kts-flip05-big { font-size: 22px; font-weight: 800; }
.kts-flip05-small { margin-top: 6px; font-size: 13px; }

06. 単語帳カード

表に言葉、裏に意味を書いた、用語集や学習に使えるタイプです。

実際の見た目

CTA
Call To Action の略。読者に行動をうながす部分のこと。

HTMLコード

<div class="kts-flip06" tabindex="0">
  <div class="kts-flip06-inner">
    <div class="kts-flip06-front">CTA</div>
    <div class="kts-flip06-back">Call To Action の略。読者に行動をうながす部分のこと。</div>
  </div>
</div>

CSSコード

.kts-flip06 { width: 240px; height: 140px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip06-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip06:hover .kts-flip06-inner, .kts-flip06:focus .kts-flip06-inner { transform: rotateY(180deg); }
.kts-flip06-front, .kts-flip06-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip06-back { transform: rotateY(180deg); }
.kts-flip06-front, .kts-flip06-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 6px; }
.kts-flip06-front { background: #fff; border: 1px solid #D1D5DB; box-shadow: 0 2px 0 #D1D5DB; color: #111827; font-size: 28px; font-weight: 800; letter-spacing: .05em; }
.kts-flip06-back { background: #FEF9C3; border: 1px solid #FDE047; color: #713F12; font-size: 14px; line-height: 1.6; }

07. 数字を見せる実績カード

表に大きな数字、裏にその説明を書いた、実績紹介向けのタイプです。

実際の見た目

1,200社導入実績
飲食店・美容室・教室など、さまざまな業種でご利用いただいています。

HTMLコード

<div class="kts-flip07" tabindex="0">
  <div class="kts-flip07-inner">
    <div class="kts-flip07-front"><span class="kts-flip07-big">1,200<small>社</small></span><span class="kts-flip07-small">導入実績</span></div>
    <div class="kts-flip07-back">飲食店・美容室・教室など、さまざまな業種でご利用いただいています。</div>
  </div>
</div>

CSSコード

.kts-flip07 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip07-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip07:hover .kts-flip07-inner, .kts-flip07:focus .kts-flip07-inner { transform: rotateY(180deg); }
.kts-flip07-front, .kts-flip07-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip07-back { transform: rotateY(180deg); }
.kts-flip07-front, .kts-flip07-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip07-front { background: #1E3A8A; color: #fff; }
.kts-flip07-back { background: #DBEAFE; color: #1E3A8A; font-size: 14px; line-height: 1.7; }
.kts-flip07-big { font-size: 40px; font-weight: 800; line-height: 1; }
.kts-flip07-big small { font-size: 16px; margin-left: 2px; }
.kts-flip07-small { margin-top: 8px; font-size: 13px; opacity: .85; }

08. ふわっと切り替わるカード

回転せずに、表と裏がふわっと入れ替わる、やさしい動きのタイプです。

実際の見た目

ふわっと切り替わります
裏面の説明文がここに入ります

HTMLコード

<div class="kts-flip08" tabindex="0">
  <div class="kts-flip08-inner">
    <div class="kts-flip08-front">ふわっと切り替わります</div>
    <div class="kts-flip08-back">裏面の説明文がここに入ります</div>
  </div>
</div>

CSSコード

.kts-flip08 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip08-inner { position: relative; width: 100%; height: 100%; }
.kts-flip08-front, .kts-flip08-back { transition: opacity .5s; }
.kts-flip08-back { opacity: 0; }
.kts-flip08:hover .kts-flip08-back, .kts-flip08:focus .kts-flip08-back { opacity: 1; }
.kts-flip08:hover .kts-flip08-front, .kts-flip08:focus .kts-flip08-front { opacity: 0; }
.kts-flip08-front, .kts-flip08-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip08-front { background: #FCE7F3; color: #9D174D; font-size: 16px; font-weight: 700; }
.kts-flip08-back { background: #EC4899; color: #fff; font-size: 14px; }

09. 下からせり上がるカード

裏面が下からせり上がってくる、スライド式のタイプです。

実際の見た目

下から出てきます
裏面の説明文がここに入ります

HTMLコード

<div class="kts-flip09" tabindex="0">
  <div class="kts-flip09-inner">
    <div class="kts-flip09-front">下から出てきます</div>
    <div class="kts-flip09-back">裏面の説明文がここに入ります</div>
  </div>
</div>

CSSコード

.kts-flip09 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip09-inner { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12px; }
.kts-flip09-back { transform: translateY(100%); transition: transform .45s; }
.kts-flip09:hover .kts-flip09-back, .kts-flip09:focus .kts-flip09-back { transform: translateY(0); }
.kts-flip09-front, .kts-flip09-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip09-front { background: #E0E7FF; color: #3730A3; font-size: 16px; font-weight: 700; }
.kts-flip09-back { background: rgba(55,48,163,.92); color: #fff; font-size: 14px; }

10. 斜めに回転するカード

斜めの方向にくるっと回る、遊び心のあるタイプです。

実際の見た目

斜めに回ります
裏面の説明文がここに入ります

HTMLコード

<div class="kts-flip10" tabindex="0">
  <div class="kts-flip10-inner">
    <div class="kts-flip10-front">斜めに回ります</div>
    <div class="kts-flip10-back">裏面の説明文がここに入ります</div>
  </div>
</div>

CSSコード

.kts-flip10 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip10-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip10:hover .kts-flip10-inner, .kts-flip10:focus .kts-flip10-inner { transform: rotate3d(1, 1, 0, 180deg); }
.kts-flip10-front, .kts-flip10-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip10-back { transform: rotate3d(1, 1, 0, 180deg); }
.kts-flip10-front, .kts-flip10-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip10-front { background: #8B5CF6; color: #fff; font-size: 18px; font-weight: 700; }
.kts-flip10-back { background: #F5F3FF; color: #5B21B6; font-size: 14px; }

11. 丸いカード

カード全体を丸くした、アイコンやバッジのように使えるタイプです。

実際の見た目

🎁
ご来店で
プレゼント

HTMLコード

<div class="kts-flip11" tabindex="0">
  <div class="kts-flip11-inner">
    <div class="kts-flip11-front"><span class="kts-flip11-big">🎁</span></div>
    <div class="kts-flip11-back"><span class="kts-flip11-small">ご来店で<br>プレゼント</span></div>
  </div>
</div>

CSSコード

.kts-flip11 { width: 160px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip11-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip11:hover .kts-flip11-inner, .kts-flip11:focus .kts-flip11-inner { transform: rotateY(180deg); }
.kts-flip11-front, .kts-flip11-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip11-back { transform: rotateY(180deg); }
.kts-flip11-front, .kts-flip11-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 50%; }
.kts-flip11-front { background: #FDE68A; font-size: 48px; }
.kts-flip11-back { background: #DC2626; color: #fff; font-weight: 700; }
.kts-flip11-big { font-size: 56px; }
.kts-flip11-small { font-size: 15px; line-height: 1.5; }

12. ダークカラーのカード

黒系の表面で、引き締まった印象にしたい時のタイプです。

実際の見た目

PREMIUMプレミアムプラン
月額 2,980円すべての機能が使い放題

HTMLコード

<div class="kts-flip12" tabindex="0">
  <div class="kts-flip12-inner">
    <div class="kts-flip12-front"><span class="kts-flip12-big">PREMIUM</span><span class="kts-flip12-small">プレミアムプラン</span></div>
    <div class="kts-flip12-back"><span class="kts-flip12-big">月額 2,980円</span><span class="kts-flip12-small">すべての機能が使い放題</span></div>
  </div>
</div>

CSSコード

.kts-flip12 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip12-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip12:hover .kts-flip12-inner, .kts-flip12:focus .kts-flip12-inner { transform: rotateY(180deg); }
.kts-flip12-front, .kts-flip12-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip12-back { transform: rotateY(180deg); }
.kts-flip12-front, .kts-flip12-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip12-front { background: #111827; color: #FACC15; letter-spacing: .1em; }
.kts-flip12-back { background: #FACC15; color: #111827; }
.kts-flip12-big { font-size: 22px; font-weight: 800; }
.kts-flip12-small { margin-top: 6px; font-size: 13px; }

13. グラデーションのカード

表面にグラデーションをかけた、華やかなタイプです。

実際の見た目

グラデーション
裏面の説明文がここに入ります

HTMLコード

<div class="kts-flip13" tabindex="0">
  <div class="kts-flip13-inner">
    <div class="kts-flip13-front">グラデーション</div>
    <div class="kts-flip13-back">裏面の説明文がここに入ります</div>
  </div>
</div>

CSSコード

.kts-flip13 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip13-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip13:hover .kts-flip13-inner, .kts-flip13:focus .kts-flip13-inner { transform: rotateY(180deg); }
.kts-flip13-front, .kts-flip13-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip13-back { transform: rotateY(180deg); }
.kts-flip13-front, .kts-flip13-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip13-front { background: linear-gradient(135deg, #6366F1, #EC4899); color: #fff; font-size: 20px; font-weight: 800; }
.kts-flip13-back { background: #fff; border: 2px solid #C4B5FD; color: #4C1D95; font-size: 14px; }

14. 手順を見せるカード

表に「STEP 1」、裏に手順の内容を書いた、使い方の説明向けのタイプです。

実際の見た目

STEP1
フォームから必要事項を入力して送信します。

HTMLコード

<div class="kts-flip14" tabindex="0">
  <div class="kts-flip14-inner">
    <div class="kts-flip14-front"><span class="kts-flip14-step">STEP</span><span class="kts-flip14-num">1</span></div>
    <div class="kts-flip14-back">フォームから必要事項を入力して送信します。</div>
  </div>
</div>

CSSコード

.kts-flip14 { width: 200px; height: 150px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip14-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip14:hover .kts-flip14-inner, .kts-flip14:focus .kts-flip14-inner { transform: rotateY(180deg); }
.kts-flip14-front, .kts-flip14-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip14-back { transform: rotateY(180deg); }
.kts-flip14-front, .kts-flip14-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip14-front { background: #0EA5E9; color: #fff; }
.kts-flip14-back { background: #F0F9FF; border: 2px solid #0EA5E9; color: #0C4A6E; font-size: 14px; line-height: 1.6; }
.kts-flip14-step { font-size: 13px; font-weight: 700; letter-spacing: .2em; }
.kts-flip14-num { font-size: 52px; font-weight: 800; line-height: 1; }

15. メニュー紹介カード

表に料理名、裏に説明を書いた、飲食店のメニュー紹介向けのタイプです。

実際の見た目

本日のランチ— 日替わり —
旬の野菜を使ったプレート。スープとドリンク付き 980円

HTMLコード

<div class="kts-flip15" tabindex="0">
  <div class="kts-flip15-inner">
    <div class="kts-flip15-front"><span class="kts-flip15-big">本日のランチ</span><span class="kts-flip15-small">— 日替わり —</span></div>
    <div class="kts-flip15-back">旬の野菜を使ったプレート。スープとドリンク付き 980円</div>
  </div>
</div>

CSSコード

.kts-flip15 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip15-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip15:hover .kts-flip15-inner, .kts-flip15:focus .kts-flip15-inner { transform: rotateY(180deg); }
.kts-flip15-front, .kts-flip15-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip15-back { transform: rotateY(180deg); }
.kts-flip15-front, .kts-flip15-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 4px; }
.kts-flip15-front { background: #FEF3C7; border: 2px solid #92400E; color: #78350F; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.kts-flip15-back { background: #92400E; color: #FEF3C7; font-size: 14px; line-height: 1.7; }
.kts-flip15-big { font-size: 22px; font-weight: 800; }
.kts-flip15-small { margin-top: 6px; font-size: 13px; }

16. クーポンカード

表に「タップして開く」、裏にクーポン内容を書いた、お得感を演出するタイプです。

実際の見た目

🎟 クーポンタップして開く
10%OFFコード：WELCOME10

HTMLコード

<div class="kts-flip16" tabindex="0">
  <div class="kts-flip16-inner">
    <div class="kts-flip16-front"><span class="kts-flip16-big">🎟 クーポン</span><span class="kts-flip16-small">タップして開く</span></div>
    <div class="kts-flip16-back"><span class="kts-flip16-big">10%OFF</span><span class="kts-flip16-small">コード：WELCOME10</span></div>
  </div>
</div>

CSSコード

.kts-flip16 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip16-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip16:hover .kts-flip16-inner, .kts-flip16:focus .kts-flip16-inner { transform: rotateY(180deg); }
.kts-flip16-front, .kts-flip16-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip16-back { transform: rotateY(180deg); }
.kts-flip16-front, .kts-flip16-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip16-front { background: #fff; border: 2px dashed #DC2626; color: #DC2626; }
.kts-flip16-back { background: #DC2626; color: #fff; }
.kts-flip16-big { font-size: 22px; font-weight: 800; }
.kts-flip16-small { margin-top: 6px; font-size: 13px; }

17. よくある質問カード

表に質問、裏に答えを書いた、FAQをカードで並べたい時のタイプです。

実際の見た目

駐車場はありますか？
店舗の裏に5台分の無料駐車場があります。

HTMLコード

<div class="kts-flip17" tabindex="0">
  <div class="kts-flip17-inner">
    <div class="kts-flip17-front">駐車場はありますか？</div>
    <div class="kts-flip17-back">店舗の裏に5台分の無料駐車場があります。</div>
  </div>
</div>

CSSコード

.kts-flip17 { width: 260px; height: 150px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip17-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip17:hover .kts-flip17-inner, .kts-flip17:focus .kts-flip17-inner { transform: rotateY(180deg); }
.kts-flip17-front, .kts-flip17-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip17-back { transform: rotateY(180deg); }
.kts-flip17-front, .kts-flip17-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip17-front { background: #F3F4F6; color: #111827; font-size: 16px; font-weight: 700; }
.kts-flip17-back { background: #374151; color: #F9FAFB; font-size: 14px; line-height: 1.6; }

18. 影が動く立体カード

回転にあわせて影が広がる、より立体的に見えるタイプです。

実際の見た目

立体的に回ります
裏面の説明文がここに入ります

HTMLコード

<div class="kts-flip18" tabindex="0">
  <div class="kts-flip18-inner">
    <div class="kts-flip18-front">立体的に回ります</div>
    <div class="kts-flip18-back">裏面の説明文がここに入ります</div>
  </div>
</div>

CSSコード

.kts-flip18 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip18-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip18:hover .kts-flip18-inner, .kts-flip18:focus .kts-flip18-inner { transform: rotateY(180deg); }
.kts-flip18-front, .kts-flip18-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip18-back { transform: rotateY(180deg); }
.kts-flip18-front, .kts-flip18-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 12px; }
.kts-flip18-front { background: #fff; color: #0F766E; font-size: 17px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.kts-flip18-back { background: #0F766E; color: #fff; font-size: 14px; box-shadow: 0 16px 30px rgba(15,118,110,.35); }

19. 点線枠のやわらかいカード

点線で囲んだ、手作り感のあるやさしい印象のタイプです。

実際の見た目

やわらかい雰囲気
裏面の説明文がここに入ります

HTMLコード

<div class="kts-flip19" tabindex="0">
  <div class="kts-flip19-inner">
    <div class="kts-flip19-front">やわらかい雰囲気</div>
    <div class="kts-flip19-back">裏面の説明文がここに入ります</div>
  </div>
</div>

CSSコード

.kts-flip19 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip19-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip19:hover .kts-flip19-inner, .kts-flip19:focus .kts-flip19-inner { transform: rotateY(180deg); }
.kts-flip19-front, .kts-flip19-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip19-back { transform: rotateY(180deg); }
.kts-flip19-front, .kts-flip19-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 18px; }
.kts-flip19-front { background: #FFFBEB; border: 2px dashed #FB923C; color: #C2410C; font-size: 16px; font-weight: 700; }
.kts-flip19-back { background: #FFEDD5; border: 2px dashed #FB923C; color: #7C2D12; font-size: 14px; }

20. 和風の落ち着いたカード

明朝体と落ち着いた色で、和の雰囲気に合わせたタイプです。

実際の見た目

季節の御膳
旬の食材を使った
八寸と炊き合わせ

HTMLコード

<div class="kts-flip20" tabindex="0">
  <div class="kts-flip20-inner">
    <div class="kts-flip20-front"><span class="kts-flip20-big">季節の御膳</span></div>
    <div class="kts-flip20-back"><span class="kts-flip20-small">旬の食材を使った<br>八寸と炊き合わせ</span></div>
  </div>
</div>

CSSコード

.kts-flip20 { width: 240px; height: 160px; perspective: 1000px; outline: none; font-family: sans-serif; }
.kts-flip20-inner { position: relative; width: 100%; height: 100%; transition: transform .6s; transform-style: preserve-3d; }
.kts-flip20:hover .kts-flip20-inner, .kts-flip20:focus .kts-flip20-inner { transform: rotateY(180deg); }
.kts-flip20-front, .kts-flip20-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.kts-flip20-back { transform: rotateY(180deg); }
.kts-flip20-front, .kts-flip20-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; text-align: center; border-radius: 2px; }
.kts-flip20-front { background: #FAF7F2; border: 1px solid #7C2D12; color: #7C2D12; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; letter-spacing: .2em; }
.kts-flip20-back { background: #7C2D12; color: #FEF3C7; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.kts-flip20-big { font-size: 22px; font-weight: 700; }
.kts-flip20-small { font-size: 14px; line-height: 1.9; letter-spacing: .1em; }

カスタマイズの小ワザ

  • カードの大きさは、CSSの一番上にあるwidthとheightの数値で変えられます。裏面の文章が多い時は、heightを大きくしてください。
  • スマホではマウスを乗せられないため、tabindex=”0″を付けてタップで裏返るようにしています。
  • 複数のカードを横に並べたい時は、カードを<div style=”display:flex; flex-wrap:wrap; gap:16px;”>で囲むと、きれいに並びます。
  • 大事な情報を裏面だけに書くと、気づかれないことがあります。表面に「マウスを乗せてね」などの一言を添えるのもおすすめです。
  • 色を変えたい時は、CSS内の色コード（#で始まる部分）を書き換えてください。

まとめ｜早見表

使いたい場面該当するフリップカード
定番の動き01, 02, 10
クイズ・学習03, 06
スタッフ紹介04
商品・料金05, 12
実績紹介07
やさしい動き08, 09
アイコン風11
華やかに見せたい13, 18
手順の説明14
飲食店のメニュー15, 20
キャンペーン16
よくある質問17
やわらかい雰囲気19

クイズカードを並べたら、楽しいページになりそう！

そうだね。読者が自分で動かして楽しめるから、ページを長く見てもらいやすくなるんだ。まずは01番の定番タイプから試してみてね。

20個のフリップカードは、HTMLとCSSだけで裏返る動きを作れる。tabindex="0"を付けるとスマホのタップでも動き、大きさはwidthとheightで調整する。

関連記事

  1. コピペで使えるカードデザイン20個まとめ（商品・プロフィール・料金プラン）

  2. コピペで使える区切り線（セパレーター）20個まとめ（波線・グラデーションなど）

  3. コピペで使えるタイムライン20個まとめ（沿革・スケジュール・手順の流れ）

  4. コピペで使えるお知らせ・アラートボックス20個まとめ（成功・エラー・注意メッセージ）

  5. ショートカットキー一覧318選｜Windows・Excel・Word・PowerPoint対応

  6. コピペで使える新着情報・お知らせ一覧20個まとめ（ニュース・更新履歴のリスト）

  7. コピペで使えるSNSシェアボタン20個まとめ（記事の最後に置く「シェアしてね」ボタンに）

  8. コピペで使えるページネーション20個まとめ（記事一覧のページ送りボタン）

  9. WordPress（ワードプレス）とは？何ができる？初心者向けに費用・メリット・始め方をわかりやすく解説