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

HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。

要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。

構文（シンタックス）

transformOrigin プロパティの基本的な構文は以下のとおりです。

値の取得

object.style.transformOrigin

値の設定

object.style.transformOrigin = "値"

指定できる値

transformOrigin プロパティには、以下の値を指定できます。

値説明
x-axis y-axis z-axisX軸・Y軸・Z軸それぞれの位置を指定し、変換の原点を設定します（例：「0 0」「50% 50%」など）。
initialこのプロパティをデフォルト値に設定します。
inherit親要素からこのプロパティの値を継承します。

サンプルコード

ここでは、HTML DOM スタイルの transformOrigin プロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    .box {
        background: lightcoral;
        width: 200px;
        height: 200px;
        margin: 2rem auto;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
</head>
<body>
<h1>DOM Style transformOrigin プロパティの例</h1>
<div class="box">
</div>
<button onclick="add()" class="btn">transformOrigin を変更</button>
<script>
    function add() {
        document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
        document.querySelector('.box').style.transformOrigin = "0 0";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。

HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

「transformOrigin を変更」ボタンをクリックすると、赤いボックスの変換原点が変更されます。デフォルトでは要素の中央が原点になりますが、この例では「0 0」を指定することで、左上を基準に回転・移動が行われる様子を確認できます。

HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

まとめ

transformOrigin プロパティを活用することで、CSS の transform による変換処理の基準点を柔軟に制御できます。回転アニメーションや拡大縮小エフェクトなど、表現の幅を広げたい場面でぜひ活用してみてください。


  1. HTML DOM スタイルの quotes プロパティの使い方を徹底解説

    HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri

  2. HTML DOM スタイルの textTransform プロパティとは？使い方を解説

    DOM スタイルの textTransform プロパティは、HTML ドキュメント内の要素のテキストに対して、大文字・小文字への変換を取得（参照）および適用するために使用されます。JavaScript から動的にテキストの表示形式を変更したい場合に便利なプロパティです。 構文 textTransform プロパティの基本的な構文は以下のとおりです。 値の取得（Returning textTransform） object.style.textTransform 値の設定（Modifying textTransform） object.style.textTransform = value;