JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで要素が画面に向いていないときの表示・非表示を設定するには？（backfaceVisibilityプロパティ）

JavaScriptのbackfaceVisibilityプロパティを使用すると、要素が画面の方を向いていない（裏面になっている）ときに、その要素を表示するかどうかを設定できます。

backfaceVisibilityプロパティとは

backfaceVisibilityは、3D変換（transform）によって要素が回転し、裏面がユーザーに見える状態になった際に、その内容を表示するかどうかを制御するプロパティです。指定できる値は「visible」（裏面も表示）と「hidden」（裏面を非表示）の2つです。カードをめくるようなUIアニメーションで、裏面のテキストや画像が鏡文字のように反転表示されるのを防ぎたい場合などに活用されます。

サンプルコード

以下のコードを実行すると、JavaScriptでbackfaceVisibilityプロパティを実装する方法を実際に確認できます。チェックボックスのオン・オフで挙動の違いを比べてみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 300px;
            background: blue;
            color: black;
            animation: mymove 2s infinite linear alternate;
         }
         @keyframes mymove {
            to {transform: rotateY(180deg);}
         }
      </style>
   </head>
   <body>
      <p>下のチェックボックスで裏面の表示を切り替えられます</p>
      <div id="box">
         <h1>Demo</h1>
      </div>
      <input type="checkbox" onclick="display(this)" checked>backfaceVisibilityプロパティ
      <script>
         function display(x) {
            if (x.checked === true) {
               document.getElementById("box").style.backfaceVisibility = "visible";
            } else {
               document.getElementById("box").style.backfaceVisibility = "hidden";
            }
         }
      </script>
   </body>
</html>

コードの解説

  • div要素には「mymove」というキーフレームアニメーションを適用し、Y軸を中心に180度まで回転させています。
  • チェックボックスのonclickイベントでdisplay()関数を呼び出し、チェックの状態に応じて処理を分岐させています。
  • チェックが入っている場合は「visible」、外されている場合は「hidden」が設定され、要素が裏返しになった瞬間の表示・非表示が切り替わります。
  • 「hidden」を選択した状態で要素が回転すると、裏面では中身の「Demo」というテキストが消えて見えます。

まとめ

このように、JavaScriptからstyle.backfaceVisibilityプロパティへ値を設定するだけで、動的に裏面の表示・非表示を制御できます。3Dフリップアニメーションなどを作成する際にぜひ活用してみてください。

  1. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE

  2. CSSのbackface-visibilityプロパティで要素の裏面表示を制御する方法

    3D変換を適用した要素が、画面に対して裏向きになったときにその面を表示するかどうかを決定するには、CSSの backface-visibility プロパティを使用します。backface-visibilityとはbackface-visibility は、要素が回転などによって画面から背を向けた状態（裏面）になった際に、その裏面を可視化するか非表示にするかを指定できるプロパティです。カードをめくるようなフリップアニメーションなど、3D効果を実装する際によく活用されます。visible（初期値）： 裏向きになっても要素が表示されます。hidden： 裏向きになった要素は非表示になります。使用例