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

JavaScriptで3D要素の下部位置（パースペクティブ原点）を設定する方法

3D要素の下部位置（消失点の位置）を設定するには、JavaScriptの perspectiveOrigin プロパティを使用します。このプロパティは、3D変形された要素を閲覧者がどこから見ているか（パースペクティブの原点）を定義するもので、デフォルト値は「50% 50%」です。

perspectiveOriginプロパティの基本

perspectiveOrigin は、X軸とY軸の位置を「20px 10%」のようにスペース区切りで指定します。値を変更することで、3D要素の見え方（奥行きの感じ方）が変化します。

サンプルコード

以下のコードを実行すると、ボタンをクリックしたときにJavaScriptで3D要素の下部位置を設定できます。コード内には3つのdiv要素が用意されています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #div1 {
            position: relative;
            margin: auto;
            height: 200px;
            width: 200px;
            padding: 20px;
            border: 2px solid blue;
            perspective: 100px;
         }

         #div2 {
            padding: 80px;
            position: absolute;
            border: 2px solid blue;
            background-color: yellow;
            transform: rotateX(45deg);
         }

         #div3 {
            padding: 50px;
            position: absolute;
            border: 2px solid blue;
            background-color: green;
            transform: rotateX(30deg);
         }
      </style>
   </head>
   <body>
      <p>divのプロパティを変更します</p>

      <button onclick = "display()">パースペクティブ原点の位置を設定</button>

      <div id = "div1">DIV1
         <div id = "div2">DIV2</div>
         <div id = "div3">DIV3</div>
      </div>
      <script>
         function display() {
            document.getElementById("div1").style.perspectiveOrigin = "20px 10%";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルでは、親要素 #div1 に perspective: 100px; を設定することで3D空間を作り、その中の #div2 と #div3 を transform: rotateX() で回転させています。

ボタンをクリックすると display() 関数が実行され、style.perspectiveOrigin に「20px 10%」が設定されます。その結果、パースペクティブの原点が左寄り・上寄りに移動し、3D要素の見え方が変化します。

値はピクセル（px）やパーセント（%）で指定でき、「bottom」「left」などのキーワードも使用可能です。3D表現の視点を細かくコントロールしたい場合に、このプロパティを活用してみてください。

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

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

  2. CSSのperspective-originプロパティで3D要素の下側の位置を指定する方法

    3D要素の下側（底部）の位置を指定するには、CSSの perspective-origin プロパティを使用します。このプロパティは、3D変換における視点（消失点）の位置を定義し、要素がどのような角度から見えるかを制御することができます。 perspective-originプロパティの基本 perspective-originプロパティは、perspectiveプロパティと組み合わせて使用されるのが一般的です。デフォルト値は「50% 50%」（要素の中央）ですが、「left」「right」「top」「bottom」といったキーワードや、パーセンテージ・ピクセル値を使って自由に位置を調整できま