CSS辞典 backface-visibilityプロパティ解説
3Dで変形する要素の背面の表示方法を指定する「backface-visibilityプロパティ」の使用方法を記載
対応バージョン：CSS3／2.1
対応ブラウザ
| 初期値 | visible |
| 適用される要素 | 変形可能な要素 |
| モジュール | CSS Transforms Level2 |
| 継承 | なし |
概要・使用方法
{ backface-visibility: 位置;}「backface-visibilityプロパティ」は、3Dで変形した要素の背面の表示方法を指定できます。x軸、y軸を基準に回転した場合などで、要素の背面を描画するかを選択できます。
指定できる値（位置）
| visible | 要素の背面を描画して、内容が裏返しに見えるように表示されます。 |
| hidden | 要素の背面を描画しません。背面を向いたとき要素を不可視になります。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>backface-visibilityプロパティCSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
@keyframes rotation{
0% {transform: rotateY(0deg)}
100% {transform: rotateY(360deg)}
}
.box-img-v{
animation: rotation 3s ease 0s infinite;
backface-visibility: visible;
}
.box-img-h{
animation: rotation 3s ease 0s infinite;
backface-visibility: hidden;
}
</style>
</head>
<body>
<div>
<h1>backface-visibility: visible;</h1>
<img class="box-img-v" width="30%" height="30%" src="https://kcfran.com/sample/1856020_s.jpg">
</div>
<div>
<h1>backface-visibility: hidden;</h1>
<img class="box-img-h" width="30%" height="30%" src="https://kcfran.com/sample/1856020_s.jpg">
</div>
</body>
</html>実行結果
backface-visibility: visible;
backface-visibility: hidden;