CSS 回転の基準点を変更する方法

公開日

by Takumi Hirashima

CSS 回転する基準点を変更する方法を紹介します。
例えば、中央以外から回転したい場合に便利な方法です。

  1. 回転の基準点を変更する方法

回転の基準点を変更する方法

CSS で回転を行う場合は transform: rotate(0deg); を使用します。
使用した場合、対象要素の中央が回転の基準点となります。

回転
.rotate {

  transform: rotate(0deg);

}

ここから基準点を変更する場合は transform-origin を使用します。
用途の多い、左上、真上、右上、右中央、右下、真下、左下、左中央の指定方法を紹介します。

左上

左上
.origin {

  transform-origin: top left;

}

真上

真上
.origin {

  transform-origin: top center;

}

右上

右上
.origin {

  transform-origin: top right;

}

右中央

右中央
.origin {

  transform-origin: center right;

}

右下

右下
.origin {

  transform-origin: bottom right;

}

真下

真下
.origin {

  transform-origin: bottom center;

}

左下

左下
.origin {

  transform-origin: bottom left;

}

左中央

左中央
.origin {

  transform-origin: center left;

}

まとめ

CSS 回転する基準点を変更する方法を紹介しました。