Backface Visibility プロパティ

最終更新：2026-09-13

backface-visibility Backface Visibility プロパティ

backface-visibility プロパティは、3D 回転後に要素の背面が観察者に向いたときに、その要素が表示されるかどうかを制御します。デフォルト値 visible は、背面に正面の内容が鏡像として表示されます。hidden にすると、背面が観察者に向いたときに要素は非表示になります。これはカードの裏返しや立方体など、表裏を区別する 3D 効果で一般的に使われます。

カテゴリ
初期値	visible
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

backface-visibility: visible | hidden;

⚙️ 値

値	タイプ	説明
`visible \| hidden`	キーワード	背面が表示されるかどうか

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
backface-visibility	✓ v36	✓ v12	✓ v16	✓ v9	✓ v23
すべての主要ブラウザーでサポート

重要： backface-visibility は 3D 変換（transform-style: preserve-3d）下でのみ有効です。2D 回転では背面が表示されることはありません。

ヒント： カードの裏返しでは、両面に backface-visibility: hidden が必要です。また背面は rotateY(180deg) で事前に回転させ、後ろ側に配置します。

❓ よくある質問

QCSS で要素を裏返した後に鏡像のテキストが見えるのはなぜですか？

Aデフォルトは backface-visibility: visible のため、要素の背面が観察者に向いたとき、正面の内容が鏡像として表示されます。まるで「透明な反射テキスト」のようです。正しくカードを裏返すには、両面に backface-visibility: hidden を設定し、背面を rotateY(180deg) で事前回転させます。裏返し中は両面が交互に表示されます。

Qbackface-visibility プロパティは描画パフォーマンスに影響しますか？

Ahidden にすると、ブラウザは表示されない背面の描画処理を省略でき、3D シーンではかえって描画パフォーマンスが向上する可能性があり、推奨される手法です。対照的に visible は常に両面を描画し続けます。3D カードが多数あるパフォーマンスに敏感なケースでは、一律に hidden を設定し、必要に応じて可視性を制御してください。

Qbackface-visibility は CSS 変換の 2D 回転で機能しますか？

Aいいえ、そこでは意味がありません。rotate 45deg のような 2D 回転では要素が裏返ることはなく、背面が観察者に向くこともないため、backface-visibility は働きません。機能するのは 3D 変換下のみです。rotateY(180deg) や rotateX(180deg) で要素が観察者から背を向けたとき、hidden は背面を非表示にします。

Qbackface-visibility を使って 3D カードの裏返し効果を作るにはどうすればよいですか？

A4 つの手順です。親コンテナに transform-style: preserve-3d を設定します。表と裏の 2 つの子要素を絶対配置で重ね、両方に backface-visibility: hidden を付けます。背面要素を rotateY(180deg) で事前回転させます。そしてインタラクション時に親を rotateY(180deg) で回転させます。transition と組み合わせることで、滑らかな裏返しが得られます。