CSSリファレンス
実践向けCSSリファレンス

3D要素の背面の表示方法を設定します。

CSS - backface-visibility

概要

CSSプロパティ「backface-visibility」は、transform[cssp] プロパティなどで指定した3D空間で変形した要素の背面の表示方法を指定することができます。x軸、y軸を基準に回転した場合などで、要素の背面を描画するかを選択できます。

<div class="target visible">背面を表示します。</div>
<div class="target hidden">背面は非表示です。</div>
<style>
.target {
  margin: 10px auto;
  padding: 30px 0;
  width: 200px;
  height: 80px;
  line-height:20px;
  text-align: center;
  
}
.target.visible{
  background: #fed;
  animation: spin 3s linear infinite;
  backface-visibility: visible;
}
.target.hidden{
 background: #acf;
 animation: spin 3s linear infinite;
 backface-visibility: hidden;
}
@keyframes spin{
  from {transform: rotateY(0deg)}
  to {transform: rotateY(360deg)}
}
</style>

GPUの利用

このプロパティは、慣習的に、しばしばGPU(Graphic Processor Unit)のアクセラレーションを得るために利用されます。[cssp]transform プロパティを使って裏側を描写する必要がないとしても、動的な描画において表示のパフォーマンスをあげられることがあります。

取りうる値

キーワードを指定することができます。

{ backface-visibility: キーワード; }

指定可能なキーワードとその解説です。

解説
visible裏面を表示します。表示されるのは表面を鏡面写した状態のものです
hidden裏面を表示しません

 

仕様書

関連CSSプロパティ

閉じる