![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/08/28
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、「transform（変形）」について説明いたします。
transform
transformプロパティは二次元座標での変形を行うプロパティ。
値に、translate() scale() rotate() skew()
のトランスフォーム関数を取る。
transformでは、
「回転」「拡大・縮小」「移動」「傾斜」させることが可能。
【例】
translate (移動)
translate()関数は、
要素をX軸方向、Y軸方向に移動させることができる。
X軸方向の値をプラスにすると右、
マイナスで左へ移動。
Y軸方向の値をプラスにすると下、
マイナスで上へ移動する。
青色の四角形に「50px, -40px」と指定し、
X軸方向に50px、Y軸方向に-40pxの移動を指定。
黄色の四角形に「Y 40px」と指定し、
Y軸方向に移動40pxの指定。
scale (拡大・縮小)
scale()関数は、
要素をX軸方向、Y軸方向に拡大縮小させることができる。
変形の原点は、オブジェクトの中心となる。
青色の四角形に「1.4,0.5」と指定し、
X軸方向は1.4倍に拡大し、Y軸方向は0.5(50%)に縮小。
黄色の四角形に「X=1.4」と指定し、X軸方向は1.4倍に拡大。
rotate (回転)
rotate()関数は、角度を指定して
要素を回転することができる。
プラスの角度指定で時計回り、
マイナスの角度指定で反時計回りに回転する。
回転の原点は、オブジェクトの中心となる。
軸を明記するとその軸を中心とした
反転効果となる。
青色の四角形に「20deg」は
時計周りに20度回転になる。
黄色の四角形に「-20deg」は
反時計回りに20度回転になる。
skew (傾斜)
skew関数は、X軸方向・Y軸方向に要素を傾斜させることができる。
青色の四角形に対して「15deg」と指定し、
X軸方向に傾斜率15度の指定。
黄色の四角形に対して「15deg」と指定し、
Y軸方向に傾斜率15度の指定。
transform-origin (変形の原点)
Webページにはブラウザの左上を原点とする座標系があり、
各要素はそれに基づいて配置される。
各要素にはそれとは別に自分自身の左上を原点とする、
ローカル座標を持っており、
transform-originプロパティが原点の位置を決めている。
ローカル座標の原点は、通常オブジェクトの左上だが、
transformプロパティを使って、変形処理を施した場合、
自動的に値が「50% 50% (オブジェクトの中央)」に
セットされる仕様となっている。
ローカル座標の原点は、transform-originの値の変更で変更可能。
\X軸方向の位置は、
比率 / 数値 / left / center / rightが設定可能。
Y軸方向の位置は、
比率/数値 / top / center / bottomが設定可能。
まとめ
今回は、transformプロパティについての内容でした。
ここまで、読み進めていただきありがとうございます。
