HTML DOM スタイル transform プロパティとは？2D・3D変換の基本と使い方
HTML DOM の style.transform プロパティは、HTML ドキュメント内の要素に対して 2D（二次元）または 3D（三次元）の変換を取得・適用するためのプロパティです。JavaScript から要素の移動・回転・拡大縮小・傾斜などを動的に制御できるため、アニメーションやインタラクティブな UI を実装する際に非常に便利です。
構文
transform プロパティの基本構文は以下の通りです。
transform の値を取得する場合
object.style.transformtransform の値を設定する場合
object.style.transform = "value"設定できる値
value には以下のいずれかの値を指定できます。
| 値 | 説明 |
|---|---|
| inherit | 親要素からこのプロパティの値を継承します。 |
| initial | このプロパティの値をデフォルト値に設定します。 |
| none | 変換を適用しません。 |
| transform-function | 有効な 2D または 3D の変換関数を指定します。 |
| vertical | 要素の高さをリサイズ可能な状態に設定します。 |
利用できる変換関数の一覧
transform-function として指定できる主な 2D・3D 変換関数は以下の通りです。
| 関数 | 説明 |
|---|---|
| matrix(n,n,n,n,n,n) | 6つの値からなるマトリックスを使って 2D 変換を指定します。 |
| matrix3d(n,n,n,n,etc...) | 16個の値からなるマトリックスを使って 3D 変換を指定します。 |
| translate(x,y) | 2D の平行移動を指定します。 |
| translate3d(x,y,z) | 3D の平行移動を指定します。 |
| translateX(x) | X 軸方向のみの平行移動を指定します。 |
| translateY(y) | Y 軸方向のみの平行移動を指定します。 |
| translateZ(z) | Z 軸方向のみの平行移動を指定します。 |
| scale(x,y) | 2D の拡大縮小を指定します。 |
| scale3d(x,y,z) | 3D の拡大縮小を指定します。 |
| scaleX(x) | X 軸方向のみの拡大縮小を指定します。 |
| scaleY(y) | Y 軸方向のみの拡大縮小を指定します。 |
| scaleZ(z) | Z 軸方向のみの拡大縮小を指定します。 |
| rotate(angle) | 2D の回転を指定します。 |
| rotate3d(x,y,z) | 3D の回転を指定します。 |
| rotateX(x) | X 軸を基準とした回転を指定します。 |
| rotateY(y) | Y 軸を基準とした回転を指定します。 |
| rotateZ(z) | Z 軸を基準とした回転を指定します。 |
| skew(x,y) | 2D の傾斜（スキュー）を指定します。 |
| skewX(x) | X 軸方向のみの傾斜を指定します。 |
| skewY(y) | Y 軸方向のみの傾斜を指定します。 |
| perspective(n) | 3D 変換における遠近感（パースペクティブ）を指定します。 |
サンプルコード
それでは、HTML DOM の style transform プロパティの具体的な使用例を見てみましょう。
<!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 transform Property Example</h1>
<div class="box">
</div>
<button onclick="add()" class="btn">Set transform</button>
<script>
function add() {
document.querySelector('.box').style.transform = "translate(10px,10px) rotate(10deg)";
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のように表示されます。
「Set transform」ボタンをクリックすると、赤いボックスに対して translate() による平行移動と rotate() による回転の 2D 変換が適用されます。
-
HTML DOM スタイルの counterIncrement プロパティの使い方を徹底解説
HTML DOM の counterIncrement プロパティは、1つ以上の CSS カウンターの値を増加または減少させるために使用されます。通常は counterReset プロパティや content プロパティと組み合わせて使われます。 counterIncrement プロパティの構文 counterIncrement プロパティを設定する際の基本的な構文は以下の通りです。 object.style.counterIncrement = none|id|initial|inherit; プロパティ値の一覧 設定できる各プロパティ値の意味は次の通りです。 値説明 no
-
HTML DOM valueプロパティとは？属性値の取得方法とサンプルコードを解説
HTML DOMのvalueプロパティは、要素が持つ属性（attribute）の値に対応する文字列を返すプロパティです。JavaScriptからHTML要素の属性値を読み取りたい場合に活用できます。基本構文valueプロパティの基本的な書き方は以下の通りです。elementAttribute.value対象となる属性オブジェクトに対して.valueを指定することで、その属性が保持している値を文字列として取得できます。実装例ここでは、画像タグ（<img>）のsrc属性の値をボタンクリック時に取得して画面に表示するサンプルを紹介します。<!DOCTYPE html> <