【CSS】transform-origin プロパティ

transform-originは、CSS transformプロパティと一緒に使われるプロパティで、回転の中心(原点・基準点)を指定します。

rotate(), skew() などの回転、変形属性を使う前に基準点を指定しておきます。初期値は 50% 50% と要素の中心点となります。

transform-originプロパティの値はパーセンテージ(%)とキーワードどちらかで指定できます。

パーセンテージ(%)	対応可能なキーワード
0%	left
0%	top
50%	center
100%	right
100%	bottom

transform-origin:0% 0%、(または単に0 0)の場合、ボックスの左上の角となります。100% 100%は右下の角に設定します。20% 80% はボックスの右に20%、下に80%設定となります。

パーセンテージ(%)	対応可能なキーワード
0% 0%	[top left] / [left top]
0% 50%	[left] / [left center] / [center left]
50% 0%	[top] / [top center] / [center top]
0% 100%	[bottom left] / [left bottom]
100% 0%	[right top] / [ top right]
50% 100%	[bottom] / [bottom center] / [center bottom]
100% 50%	[right] / [right center] / [center right]
100% 100%	[bottom right] / [right bottom]

左上の角を中心に時計周りに回転させる

【CSS】transform-origin:0% 0%

</style>
div{
    width:100px;
    height:100px;
    color:#9f9f9f;
}
.transform-origin{
    transform-origin:0% 0%;
    transform:rotate(45deg);
}
</style>

HTML

</body>
  <div class="transform-origin">回転</div>
</body>

transform-origin:0% 0%の意味は基準点を左上(0% 0%)に指定することで、それを基準に45度回転(時計周り)します。

パーセンテージ(%)を「transform-origin:top left」に書き換えても結果は同じになります。

transform-origin:0% 0%;

回転

右下の角を中心に半時計周りに回転させる

「transform-origin:100% 100%; 」の意味は基準点が右下にあり、それを基準に-45度回転(半時計周り)します。

「100% 100%」の代わりに「bottom right; 」にしても同じ結果となります。

【CSS】transform-origin:100% 100%

</style>
.transform-origin{
    transform-origin:100% 100%;
    transform:rotate(-45deg);
}
</style>

transform-origin:100% 100%;

回転