CSSプロパティ backface-visibility：要素の裏面の表示を制御する
このCSSプロパティ `backface-visibility` を使用すると、要素がユーザーから背を向けたときに、その背面を表示するかどうかを制御できます。これは、特に3D変換効果を使用する場合に便利です。この記事では、`backface-visibility` プロパティの使用方法、その仕組み、使用例について説明します。
1. backface-visibilityとは？
`backface-visibility` プロパティは、要素がユーザーの方を向いていない場合（つまり、背面が表示されている場合）に、その要素の背面を表示するかどうかを指定します。これは、要素が回転したり、反転したりする3D変換効果を使用する場合に特に役立ちます。
3D変換を使用しない場合、`backface-visibility` プロパティは視覚的に影響を与えません。
2. 構文と値
`backface-visibility` プロパティには、次の3つの値を設定できます。
| 値 | 説明 |
|---|---|
visible |
要素の背面は、要素がユーザーから背を向けている場合でも、常に表示されます。これがデフォルト値です。 |
hidden |
要素の背面は、要素がユーザーから背を向けている場合は表示されません。 |
initial |
プロパティを初期値に戻します。 |
3. backface-visibilityの適用例
3.1. カード反転効果の作成
`backface-visibility` プロパティの一般的な使用例は、カード反転効果を作成することです。この効果を実現するには、要素の前面と背面を表す2つの要素を作成し、`transform` プロパティを使用して要素を反転させます。`backface-visibility: hidden;` を設定することで、反転時に要素の裏側が透けて見えることを防ぎます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>カード反転効果</title>
<style>
.card {
width: 200px;
height: 300px;
margin: 50px auto;
perspective: 600px; /* 親要素にパースペクティブを設定 */
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d; /* 子要素の3D効果を保持 */
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 裏面を非表示にする */
}
.card-front {
background-color: lightblue;
color: black;
}
.card-back {
background-color: lightcoral;
color: white;
transform: rotateY(180deg); /* 初期状態で180度回転させておく */
}
</style>
</head>
<body>
<div class="card">
<div class="card-inner">
<div class="card-front">表側</div>
<div class="card-back">裏側</div>
</div>
</div>
</body>
</html>
3.2. パフォーマンスの最適化
`backface-visibility: hidden;` を設定すると、ブラウザは要素の背面を描画する必要がなくなり、レンダリングパフォーマンスが向上します。これは、特に多くの要素をアニメーションさせている場合に顕著な効果があります。
4. ブラウザの互換性
`backface-visibility` プロパティは、すべての主要なブラウザでサポートされています。ただし、古いブラウザでは、ベンダープレフィックスが必要になる場合があります。詳細については、Can I use...などのウェブサイトを参照してください。
参考:
よくある質問
1. backface-visibilityは3D変換以外にどのような効果がありますか？
`backface-visibility` は、3D変換を使用しない限り、視覚的な効果はありません。要素がユーザーから背を向けている場合にのみ適用されます。
2. backface-visibility: hidden; を設定すると、要素は完全に非表示になりますか？
いいえ、`backface-visibility: hidden;` を設定しても、要素は完全に非表示になりません。要素の背面のみが非表示になります。要素の前面は、通常どおり表示されます。
3. backface-visibilityを使用する際の注意点は何ですか？
`backface-visibility` を使用する場合、要素の背面が非表示になっていることをユーザーに明確に伝えることが重要です。たとえば、カード反転効果の場合、ユーザーがカードの裏側を見ることができないことを示すために、視覚的なヒントを提供する必要があります。