▲TOPへ戻る

【CSS】transformのrotateとtransform-originについて。回転させる基点を変える

transform:rotate

rotateはZ軸を基準に回転します。

transform: rotate(60deg);
transform: rotateZ(60deg);と書いても同じ動きをします。

rotateXはX軸を基準に回転します。

transform: rotateX(180deg);

rotateYはY軸を基準に回転します。

transform: rotateY(180deg);

transform-origin

transform-originを指定することにより、回転させる基点を変えることができます。

指定しなければ。transform-origin: 50% 50%; で基点は要素の真ん中になります。

transform-origin: 0% 0%;

または
transform-origin: top left;

transform-origin: 0% 100%;

または
transform-origin: left bottom;

transform-origin: 100% 0%;

または
transform-origin: right top;

transform-origin: 100% 100%;

または
transform-origin: bottom right;

まとめ

point

rotateとrotateZはZ軸で回転

rotateXはX軸で回転

rotateYはY軸で回転

transform-originで回転する基点を移動

要素の左上
transform-origin: 0% 0%
transform-origin: left top

要素の左下
transform-origin: 0% 100%
transform-origin: left bottom

要素の右上
transform-origin: 100% 0%
transform-origin: right top

要素の右下
transform-origin: 100% 100%
transform-origin: bottom right

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<