概要
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 | 裏面を表示しません |