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

JavaScriptで3D要素の遠近感（perspective）を設定する方法を解説

JavaScriptで3D要素の見え方に遠近感を持たせたい場合は、perspectiveプロパティを使用します。このプロパティを設定することで、要素があたかも立体的に表示されているかのような奥行きのある表現が可能になります。

perspectiveプロパティとは

perspectiveは、3D変形された要素を観察者の目からどのくらいの距離で見るかを指定するCSSプロパティです。値が小さいほど遠近感が強調され、大きいほどフラットな印象になります。JavaScriptから動的に変更すれば、ボタン操作などに応じて遠近感をリアルタイムに切り替えることもできます。

実装例

以下のコードでは、ボタンをクリックするとdiv要素のperspectiveの値が「90px」に変更され、3D要素の見え方が変化します。ぜひ実際に試してみてください。

<!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 = "myFunction()"> 遠近感を設定 </button>
      <div id = "div1">DIV1
         <div id = "div2">DIV2</div>
         <div id = "div3">DIV3</div>
      </div>

      <script>
      function myFunction() {
         document.getElementById("div1").style.perspective = "90px";
      }
      </script>
   </body>
</html>

コードのポイント解説

1. 親要素にperspectiveを設定

idが「div1」の親要素に対して、初期値としてperspective: 100px;が設定されています。この値によって、子要素の3D変形に奥行きが生まれます。

2. 子要素をrotateXで傾ける

子要素の「div2」と「div3」には、それぞれtransform: rotateX(45deg)とtransform: rotateX(30deg)が適用されており、X軸を基準に回転した状態で表示されます。perspectiveがあることで、単なる2Dの縮小ではなく、本物の立体感ある傾きとして描画されます。

3. JavaScriptで動的に値を変更

ボタンがクリックされるとmyFunction()が呼び出され、次の一行でperspectiveの値が更新されます。

document.getElementById("div1").style.perspective = "90px";

このように、element.style.perspectiveにピクセル値を文字列として代入するだけで、ページを再読み込みすることなく遠近感を動的に変更できます。

まとめ

JavaScriptで3D要素の遠近感を制御するには、対象となる親要素のstyleオブジェクト経由でperspectiveプロパティを設定します。値を小さくすると立体感が強まり、大きくすると平面に近い表示になります。アニメーションやインタラクティブなUIと組み合わせれば、より魅力的な3D表現を実現できるでしょう。

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

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

  2. CSSのperspectiveプロパティで3D要素の遠近感（パースペクティブ）を指定する方法

    CSSの perspective プロパティを使うと、3D要素をどのような距離感・奥行きで表示するか（パースペクティブ＝遠近感）を指定できます。perspectiveの値は「視点から要素までの距離」として機能し、数値が小さいほど視点に近くなり、立体感が強調されます。逆に数値が大きいほど、フラットな見た目に近づきます。perspectiveプロパティの基本親要素に perspective を設定すると、その子要素に対して3D変形（rotateX、rotateYなど）を適用した際に、自然な遠近効果が反映されるようになります。子要素側では transform-style: preserve-3d;