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

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

transform:rotate()について

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

transform:rotate(数値deg);

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

.item1{
   transform:rotate(45deg);
}

.item1{

transform:rotate(45deg);

}

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

例

45度回転

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

.item2{
   transform:rotate(-45deg);
}

.item2{

transform:rotate(-45deg);

}

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

-45度回転

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