CSSのbackface-visibilityで3D要素の裏面表示を制御する方法を解説

2024.09.13
スポンサーリンク

backface-visibilityプロパティは、3Dで回転した要素の裏側が表示されるかどうかを制御します。主に3Dトランスフォームと共に使用され、回転時に裏面を表示するかどうかを決定します。

スポンサーリンク

backface-visibilityの値とその効果の一覧

  • visible: 裏面が表示されます。
  • hidden: 裏面は表示されません（透過状態になります）。

注意点と関連情報

backface-visibilityは、要素が3Dで回転して裏面が見える時にのみ効果を発揮します。要素が2Dトランスフォームのみを使用している場合、このプロパティは無効です。

backface-visibilityが効かない理由として考えられること

要素が3D変換されていない

backface-visibilityは、要素が3D変換（transform）されている場合にのみ機能します。要素が2D変換のみで、3Dの回転が適用されていないと、backface-visibilityの効果は発揮されません。
対策：transform: rotateY()やrotateX()などの3D変換を適用していることを確認します。

要素のスタッキングコンテキストが影響している

backface-visibilityは、要素がスタッキングコンテキスト(z-index)によって制約される場合、期待通りに機能しないことがあります。
対策：要素のz-indexやpositionプロパティを確認し、スタッキングコンテキストを適切に管理するようにします。

ブラウザの互換性の問題

backface-visibilityは、すべてのブラウザで一貫してサポートされているわけではありません。特に古いブラウザではサポートが不十分な場合があります。
対策：最新のブラウザを使用しているか確認し、必要に応じてベンダープレフィックス（例：-webkit-backface-visibility）を追加して互換性を確保します。

共通するCSSコード

.css-sample-container {
  perspective: 1000px;
  margin-bottom: 20px;
}

.css-sample-box {
  width: 200px;
  height: 200px;
  background-color: #ffcc99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  text-align: center;
  border: 1px solid #999;
  transform: rotateY(180deg);
  transition: transform 0.6s;
  backface-visibility: visible;
}

.css-sample-container:hover .css-sample-box {
  transform: rotateY(0deg);
}

backface-visibility: visible

裏面が表示される例です。3D回転された要素の裏側が可視化されます。

HTMLコード

<div class="css-sample-container backface-visible">
  <div class="css-sample-box">Visible</div>
</div>

CSSコード

.backface-visible .css-sample-box {
  backface-visibility: visible;
}

表示結果

Visible

backface-visibility: hidden

裏面が表示されない例です。裏側は透過され、見えなくなります。

HTMLコード

<div class="css-sample-container backface-hidden">
  <div class="css-sample-box">Hidden</div>
</div>

CSSコード

.backface-hidden .css-sample-box {
  backface-visibility: hidden;
}

表示結果

Hidden

まとめ

  • backface-visibilityは、3Dトランスフォームを使用して回転した要素の裏側が表示されるかどうかを制御します。
  • visible: 裏面が表示されます。
  • hidden: 裏面は表示されません。
  • 3Dトランスフォームと一緒に使用する場合にのみ、このプロパティが適用されます。
スポンサーリンク