HTML DOMスタイルのbackfaceVisibilityプロパティとは？使い方を徹底解説
backfaceVisibilityプロパティとは
backfaceVisibilityプロパティは、要素がユーザーに対して反転した際に、その裏面（背面）を表示するかどうかを指定するためのプロパティです。このプロパティは主に3D変換（transform）と組み合わせて使用され、要素を回転させたときに裏面を見せるか、それとも非表示にするかを制御します。
例えば、カードをめくるようなアニメーション効果を実装する際に、表面と裏面で異なるコンテンツを表示したいケースなどで、このプロパティが重要な役割を果たします。
構文（Syntax）
backfaceVisibilityプロパティを設定するための構文は以下の通りです。
object.style.backfaceVisibility = "visible|hidden|initial|inherit"
設定できる値
backfaceVisibilityプロパティには、以下の4つの値を指定できます。
| 番号 | 値と説明 |
|---|---|
| 1 | visible 要素の裏面を表示します。これがデフォルト値です。 |
| 2 | hidden 要素の裏面を非表示にします。 |
| 3 | initial このプロパティを初期値に設定します。 |
| 4 | inherit 親要素のプロパティ値を継承します。 |
サンプルコード
backfaceVisibilityプロパティを使用した具体的な例を見てみましょう。以下のコードでは、180度回転したdiv要素に対して、ボタンクリック時に裏面の表示状態を切り替えています。
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
height: 80px;
width: 80px;
background-color: lightgreen;
float: left;
text-align: center;
letter-spacing: 0.8px;
margin-bottom:10px;
}
#one {
transform: rotateY(180deg);
backface-visibility: visible;
}
p{
clear:both;
}
</style>
<script>
function visibilityChange(){
document.getElementById("one").style.backfaceVisibility="hidden";
document.getElementById("Sample").innerHTML="裏面の表示が非表示（hidden）に設定されました。";
}
</script>
</head>
<body>
<div id="one">Lateral Inversion</div>
<div>Lateral inversion</div>
<br>
<p>下のボタンをクリックすると、上のdiv要素の裏面の表示状態が変更されます</p>
<button onclick="visibilityChange()">CHANGE VISIBILITY</button>
<p id="Sample"></p>
</body>
</html>
実行結果
上記のコードを実行すると、以下のような出力が得られます。
「CHANGE VISIBILITY」ボタンをクリックすると、backfaceVisibilityの値が「hidden」に変更され、要素の裏面が非表示になります。
-
HTML DOM スタイルの counterIncrement プロパティの使い方を徹底解説
HTML DOM の counterIncrement プロパティは、1つ以上の CSS カウンターの値を増加または減少させるために使用されます。通常は counterReset プロパティや content プロパティと組み合わせて使われます。 counterIncrement プロパティの構文 counterIncrement プロパティを設定する際の基本的な構文は以下の通りです。 object.style.counterIncrement = none|id|initial|inherit; プロパティ値の一覧 設定できる各プロパティ値の意味は次の通りです。 値説明 no
-
HTML DOM valueプロパティとは？属性値の取得方法とサンプルコードを解説
HTML DOMのvalueプロパティは、要素が持つ属性（attribute）の値に対応する文字列を返すプロパティです。JavaScriptからHTML要素の属性値を読み取りたい場合に活用できます。基本構文valueプロパティの基本的な書き方は以下の通りです。elementAttribute.value対象となる属性オブジェクトに対して.valueを指定することで、その属性が保持している値を文字列として取得できます。実装例ここでは、画像タグ（<img>）のsrc属性の値をボタンクリック時に取得して画面に表示するサンプルを紹介します。<!DOCTYPE html> <