Aug. 24th,2021
プロパティについて
概要
| 初期値 | “transform-origin: 50% 50%;” |
| 適用対象 | 変形可能要素 |
| 継承 | No |
| パーセント値 | 参照ボックスの寸法を“100%”とする |
| 計算値 | “<length-percentage>”値の算出された値で表された左上からの水平と垂直方向のオフセット距離をアイテムとするリスト |
| アニメーション | 計算値 |
“transform-origin”プロパティは変形の原点を指定するプロパティです。
“rotate()”関数や“scale()”関数などの変形関数による変形は“transform-origin”プロパティで指定された原点を中心にして行われます。
“transform-origin”プロパティの値は要素に適用する変形を表現するための変形マトリクスを算出するために使用されます。“transform-origin”プロパティは指定された値の分だけ要素を平行移動し、“transform”プロパティによる変形を適用した後で再び“transform-origin”プロパティは指定された値の分だけ要素を逆方向へ平行移動することで適用されます。
サンプルコード
div { transform-origin: top right;}
値
| 値 | 説明 |
|---|---|
| “<position>”値 | |
| <percentage> | 水平方向の場合は参照ボックスの横幅、水平方向の場合は参照ボックスの高さを“100%”として変形の原点を指定する (参照ボックスの左上からの距離で指定します。) |
| <length> | “px”、“em”などで変形の原点を指定する (参照ボックスの左上からの距離で指定します。) |
| top | 垂直方向の距離を“0%”とした場合と同じ |
| right | 水平方向の距離を“100%”とした場合と同じ |
| bottom | 垂直方向の距離を“100%”とした場合と同じ |
| left | 水平方向の距離を“0%”とした場合と同じ |
| center | 水平方向の距離を“50%”とした場合と同じ (他の値が水平方向の位置を指定していれば垂直方向の位置を“50%”とした場合と同じです。) |
| 他の値 | |
| 共通キーワード | |
値の指定方法
値は“left”、“center”、“right”、“top”、“bottom”と“<length-percentage>”値のいずれかをホワイトスペース(半角スペース(“ ”)やタブ文字など)で区切って1個、2個もしくは3個記述します。
値を1つ指定する場合
値が“left”または“right”の場合、その値は原点の水平方向の位置を指定します。垂直方向の位置は“center”とみなされます。
左端、上下中央に配置
transform-origin: left;
右端、上下中央に配置
transform-origin: right;
値が“top”または“bottom”の場合、その値は原点の垂直方向の位置を指定します。水平方向の位置は“center”とみなされます。
上端、左右中央に配置
transform-origin: top;
下端、左右中央に配置
transform-origin: bottom;
値が“center”の場合は水平方向と垂直方向の両方の位置を指定します。
中央に配置
transform-origin: center;
値を“<length-percentage>”値で指定した場合はその値は原点の水平方向の位置を指定します。垂直方向の位置は“center”となります。
上下中央、水平方向には左端から指定した距離に配置
transform-origin: 〚水平方向の“<length-percentage>”値〛;
値を1つだけ指定する場合は原点のz軸方向の位置は常に“0px”とみなされます。
値を2つ指定する場合
値を2つ指定する場合には一方の値が原点の水平方向の位置、もう一方の値が垂直方向の位置を指定します。どちらの値がどの方向に対応するかは値の組み合わせによって異なります。
垂直方向の位置と水平方向の位置
transform-origin: 〚水平方向の位置〛 〚垂直方向の位置〛;
水平方向の位置と垂直方向の位置
transform-origin: 〚垂直方向の位置〛 〚水平方向の位置〛;
一つ目の値が“left”もしくは“right”の場合、1つ目の値は原点の水平方向の位置を表し、2つ目の値は垂直方向の位置を表します。2つ目の値には“top”、“bottom”、“center”、もしくは“<length-percentage>”値を指定できます。
左端、垂直方向には上端から指定した距離に配置
transform-origin: left 〚垂直方向の“<length-percentage>”値〛;
右端、垂直方向には上端から指定した距離に配置
transform-origin: right 〚垂直方向の“<length-percentage>”値〛;
一つ目の値が“top”もしくは“bottom”の場合、1つ目の値は原点の垂直方向の位置を表し、2つ目の値は水平方向の位置を表します。2つ目の値には“left”、“right”、“center”、もしくは“<length-percentage>”値を指定できます。
上端、水平方向には左端から指定した距離に配置
transform-origin: top 〚水平方向の“<length-percentage>”値〛;
下端、水平方向には左端から指定した距離に配置
transform-origin: bottom 〚水平方向の“<length-percentage>”値〛;
一つ目の値が“center”の場合には二つ目の値に“top”、“bottom”、“left”、“right”、“center”、“<length-percentage>”値のいずれも指定できます。
二つ目の値が“top”もしくは“bottom”の場合は“center”は水平方向の位置、二つ目の値が垂直方向の位置を表します。
二つ目の値が“left”、“right、“center”、もしくは“<length-percentage>”値の場合は“center”は原点の垂直方向の位置、二つ目の値が水平方向の位置を表します。
垂直方向の位置と水平方向の位置
transform-origin: center 〚水平方向の“<length-percentage>”値〛;
水平方向の位置と垂直方向の位置
transform-origin: center 〚垂直方向の“<length-percentage>”値〛;
一つ目の値が“<length-percentage>”値の場合にも二つ目の値に“top”、“bottom”、“left”、“right”、“center”、“<length-percentage>”値のいずれも指定できます。
二つ目の値が“top”もしくは“bottom”、もしくは“<length-percentage>”値の場合は一つ目の値は原点の水平方向の位置、二つ目の値が垂直方向の位置を表します。
二つ目の値が“left”、“right、“center”の場合は一つ目の値は原点の垂直方向の位置、二つ目の値が水平方向の位置を表します。
垂直方向の位置と水平方向の位置
transform-origin: 〚“<length-percentage>”値〛 〚“left”、“right”もしくは“center”〛;
水平方向の位置と垂直方向の位置
transform-origin: 〚“<length-percentage>”値〛 〚“top”、“left”もしくは“center”〛;
値が2つとも“<length-percentage>”値の場合には一つ目の“<length-percentage>”値が水平方向、二つ目の“<length-percentage>”値が垂直方向の位置を表します。
水平方向の位置と垂直方向の位置
transform-origin: 〚水平方向の“<length-percentage>”値〛 〚垂直方向の“<length-percentage>”値〛;
値を2つ指定する場合は原点のz軸方向の位置は常に“0px”とみなされます。
値を3つ指定する場合
最初の2つの値は値を2つだけ指定する場合と同じです。
3番目に記述された値は常に原点のz軸方向の位置を表し、“<length>”値でなければなりません。
垂直方向の位置と水平方向の位置とz軸方向の位置
transform-origin: 〚垂直方向の位置〛 〚水平方向の位置〛 〚“left”もしくは“right”〛 〚“<length>”値〛;
水平方向の位置と垂直方向の位置とz軸方向の位置
transform-origin: 〚水平方向の位置〛 〚垂直方向の位置〛 〚“top”もしくは“bottom”〛 〚“<length>”値〛;
使用例
キーワード値で指定する
<div class="sample-box">
箱
</div>
.sample-box {
transform-origin: top;
animation: 5s linear infinite SampleRotation;
}
@keyframes SampleRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.sample-box {
transform-origin: right;
animation: 5s linear infinite SampleRotation;
}
@keyframes SampleRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.sample-box {
transform-origin: bottom;
animation: 5s linear infinite SampleRotation;
}
@keyframes SampleRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.sample-box {
transform-origin: left;
animation: 5s linear infinite SampleRotation;
}
@keyframes SampleRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.sample-box {
transform-origin: center;
animation: 5s linear infinite SampleRotation;
}
@keyframes SampleRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.sample-box {
transform-origin: top left;
animation: 5s linear infinite SampleRotation;
}
@keyframes SampleRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.sample-box {
transform-origin: bottom right;
animation: 5s linear infinite SampleRotation;
}
@keyframes SampleRotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
z軸方向の位置を指定する
<div class="sample-box">
箱
</div>
.sample-box {
transform-origin: center center 0;
animation: 5s linear infinite SampleRotation3d;
}
@keyframes SampleRotation3d{
0% { transform: rotateX(0deg); }
100% { transform: rotateX(360deg); }
}
.sample-box {
transform-origin: center center 100px;
animation: 5s linear infinite SampleRotation3d;
}
@keyframes SampleRotation3d{
0% { transform: rotateX(0deg); }
100% { transform: rotateX(360deg); }
}
