cssだけで要素を回転させる方法 transform:rotate()

css

transformは要素を変形させることのできるcssのプロパティですが、今回は要素を回転させる方法を取り上げたいと思います。
transformに関してはいずれ使いかたまとめを作りたいと思ってますので、乞うご期待!

transform:rotate()について

transformで回転を扱う場合はrotate()を使います。
回転角度に関しては数値で指定します。

transform:rotate(数値deg);

degは「〇〇度」みたいな意味になります。

これで、要素の真ん中を基点にして45度回転します。

45度回転

半時計回りに回転させたいときは-を使います。

このように半時計回りに45度回転しました。

-45度回転

要素を回転させるときの基準点を設定する方法

要素を回転させるときの基準点を設定する方法はこちらの記事をご覧ください。

【css】要素を回転させるときの基準点を設定する方法
transform:rotate()を使って回転を加えたが意図とした位置で回転してくれないといった悩みはないでしょうか?この場合、回転する基準点を設定することで、意図とした位置で回転させることができます。cssで要素を回転させるときの基準点