最終更新日 2021年6月20日

transform-originプロパティ

transform-originは、要素を変形させる際の基準点を指定するプロパティです。

基準点の初期値は、要素ボックスの中心で、奥行きはゼロです。指定する値は1～3個で、半角スペースで区切って並べます。

・1個目の値は、X軸（水平）方向。長さの値、パーセント値、キーワードを指定できます。
・2個目の値は、Y軸（垂直）方向。長さの値、パーセント値、キーワードを指定できます。
・3個目の値は、Z軸（奥行き）方向。長さの値のみ指定できます。

CSS3での変更点

・transform-originは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
50% 50% 0	ブロックレベル要素、インラインレベル要素	なし

値	説明
長さの値	要素ボックスの左上隅からの距離を、数値に「px」「em」などの単位をつけて指定します。「0」を指定する場合は、単位は必要ありません。負の値も指定可能です。1～3個目の全ての値に指定できます。
パーセント値	要素ボックスの左上隅からの距離を、要素ボックスの幅または高さに対する割合で指定します。負の値も指定可能です。3個目の値には指定できません。
left	要素ボックスの左端を示します。3個目の値には指定できません。
center	要素ボックスの幅の中心または高さの中心を示します。3個目の値には指定できません。
right	要素ボックスの右端を示します。3個目の値には指定できません。
top	要素ボックスの上端を示します。3個目の値には指定できません。
bottom	要素ボックスの下端を示します。3個目の値には指定できません。

サンプルコード

transform-origin: left;
transform-origin: left top;
transform-origin: left 30%;
transform-origin: left top 20px;
transform-origin: right bottom 10px;
transform-origin: center top 0;
transform-origin: 20% 10% 5px;
transform-origin: 50px 30px 5px;

参考文献：CSS Transforms

ザマワンにエントリーしました！

『ザマワン』は「座間ワンミニッツ」の略称であり、座間市の魅力を１分にギュッと詰め込む動画コンテストです。