transform-origin プロパティ
transform-originプロパティは、
transformプロパティで設定される
要素の変形が行われる基点を設定します。
デフォルトでは、この点は要素の中心であり、
例えば回転はその中心を基準に行われます。
しかし、この動作は変更可能で、要素をその辺や角、
あるいは要素の外側にある点を基準に回転させることができます。
構文
セレクタ {
transform-origin: X軸 Y軸 Z軸;
}
Y軸とZ軸の値は必須ではなく、省略可能です （その場合、デフォルト値が適用されます）。 Z軸に沿った基点の移動は、3D変形に必要です。
X軸の値
| 値 | 説明 |
|---|---|
| CSS単位 | 値には、変形の中心の要素の左端からのオフセットを指定する あらゆるサイズの単位を使用できます。 正の値は変形の中心を右に（要素の内側に）、 負の値は左に（要素の外側に）要素の左端を基準に移動させます。 |
left |
水平方向の回転点を要素の左端に設定します。 |
right |
水平方向の回転点を要素の右端に設定します。 |
center |
水平方向の回転点を要素の中央に設定します。 |
デフォルト値: center。
Y軸の値
| 値 | 説明 |
|---|---|
| CSS単位 | 値には、変形の中心の要素の上端からのオフセットを指定する あらゆるサイズの単位を使用できます。 正の値は変形の中心を下に（要素の内側に）、 負の値は上に（要素の外側に）要素の上端を基準に移動させます。 |
top |
垂直方向の回転点を要素の上端に設定します。 |
bottom |
垂直方向の回転点を要素の下端に設定します。 |
center |
垂直方向の回転点を要素の中央に設定します。 |
デフォルト値: center。
Z軸の値
| 値 | 説明 |
|---|---|
| CSS単位 | 値には、変形の中心の要素の平面からのオフセットを指定する あらゆるサイズの単位を使用できます。 正の値はそれを手前に（画面平面から）、負の値は奥に移動させます。 |
デフォルト値: 0px。
例
現在、transform-originプロパティの値は設定されておらず、 ブロックはその中心を基準に回転します。 マウスをブロックに合わせて効果を確認してください:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
例
次に、ホバー時にブロックは左上の角を基準に回転します:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
例
次に、ホバー時にブロックは右下の角を基準に回転します。
これには、変形の基点を右に100%、
下に100%移動させる必要があります
（pxで指定することもできますが、
要素のサイズが変わっても変形の基点は同じ位置に残るため、
%で指定する方が良いでしょう）:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
例
ブロックを右上の角を基準に回転させます:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
例
ブロックを左辺の中央を基準に回転させます。
これには、X軸にleft（回転点は左）、
Y軸にcenter（回転点は垂直方向の中央）を設定します:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
例
このプロパティは回転だけでなく、他の変形にも設定できます。
scaleを使用して、変形の基点を左下の角として指定して拡大してみましょう:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
例
次に、変形の基点を右上の角として指定します:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
例
変形の基点は要素の外側にも設定できます。 次の例では、マウスを赤いブロックに合わせると、 黒いブロックが外側にある点を基準に回転します:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
