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

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

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

transform: rotateX(180deg);

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

transform: rotateY(180deg);

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;