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

JavaScriptで変形した要素の位置を設定する方法｜transformOriginプロパティの使い方

JavaScriptで変形（transform）された要素の位置を変更するには、transformOriginプロパティを使用します。このプロパティを使うことで、要素が回転・拡大縮小される際の基準点（原点）を自由に指定できます。

transformOriginプロパティとは

transformOriginは、CSSのtransform-originに対応するJavaScriptのプロパティです。デフォルトでは要素の中心（50% 50%）が基準点になりますが、ピクセル値やパーセンテージを指定することで、回転やスケール変換の起点を任意の場所に変更できます。

また、3D変形を扱う場合は、親要素側の視点位置を制御するperspectiveOriginプロパティも合わせて使用します。

サンプルコード

以下のコードでは、ボタンをクリックすると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%";
      document.getElementById("div2").style.transformOrigin = "0 0";
    }
  </script>
</body>
</html>

コードの解説

perspectiveOriginで視点の位置を変更

document.getElementById("div1").style.perspectiveOrigin = "20px 10%"; の部分では、親要素（div1）のパースペクティブ（遠近感）の原点を「左から20px・上から10%」の位置に移動しています。これにより、子要素の3D表示の見え方が変化します。

transformOriginで変形の基準点を変更

document.getElementById("div2").style.transformOrigin = "0 0"; の部分では、DIV2の変形基準点を要素の左上（0, 0）に設定しています。そのため、rotateX(45deg)による回転が中心ではなく左上を軸として行われます。

まとめ

  • transformOrigin：要素自身の変形（回転・拡大縮小など）の基準点を指定する
  • perspectiveOrigin：親要素の3D視点（消失点）の位置を指定する
  • どちらも element.style.プロパティ名 = 値; の形式でJavaScriptから動的に設定可能
  1. JavaScriptでリストアイテムのマーカー位置を設定する方法

    JavaScriptでリストアイテムのマーカー位置を設定するには リストアイテムのマーカー（行頭記号）の位置を設定するには、JavaScriptのlistStylePositionプロパティを使用します。このプロパティはCSSのlist-style-positionプロパティに対応しており、ボタン操作などのタイミングでマーカーの表示位置を動的に変更できます。 listStylePositionプロパティに指定できる値 inside … マーカーをリストアイテムの内側（テキストの流れの中）に表示します。 outside … マーカーをリストアイテムの外側に表示します（初期値）。 サンプルコー

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

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