最終更新日

transform-originプロパティ

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

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

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

以下は、関連プロパティです。

transform
transform-style
perspective
perspective-origin
backface-visibility

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外部リンク
HOME