最終更新日
transform-originは、要素を変形させる際の基準点を指定するプロパティです。
基準点の初期値は、要素ボックスの中心で、奥行きはゼロです。指定する値は1~3個で、半角スペースで区切って並べます。
・1個目の値は、X軸(水平)方向。長さの値、パーセント値、キーワードを指定できます。
・2個目の値は、Y軸(垂直)方向。長さの値、パーセント値、キーワードを指定できます。
・3個目の値は、Z軸(奥行き)方向。長さの値のみ指定できます。
以下は、関連プロパティです。
・transform
・transform-style
・perspective
・perspective-origin
・backface-visibility
初期値 | 適用先 | 継承 |
---|---|---|
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;