← 一覧へ

やってみようカードを押して、裏返してみてください

アニメーション・演出マイナー（知る人ぞ知る）

カードフリップ

Flip Card

カードを押すと、くるっと裏返って裏面の内容が見える。単語カードのような動き。

別名カードめくり裏返しアニメーション3Dフリップくるっと回るカード

どこで使われている？

よく見かける場所
単語帳アプリ、クイズ、商品の表と裏の説明
使うとよい場面
表と裏で、答えや詳しい情報を見せたいとき
避けたい場面
大事な情報を裏に隠すこと

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「カードフリップ（Flip Card）」を実装してください。

動き：カードの表と裏を同じ位置に重ね、押すとカード全体を縦の軸で180度回転させて裏面を見せる。回転は立体的に見えるよう奥行き（パースペクティブ）を付け、もう一度押すと表に戻す。

使う部品：transform: rotateY(180deg) + backface-visibility: hidden
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

Webサイトならtransform: rotateY(180deg) + backface-visibility: hidden
iPhoneアプリなら.rotation3DEffect
AndroidアプリならModifier.graphicsLayer { rotationY }
FlutterならTransform + Matrix4.rotationY（flip_card パッケージ）
React Nativeならreact-native-reanimated の rotateY

似ているもの・一緒に使うもの