【CSS】transform: rotate()で要素を回転

CSS

2022.06.09 2021.03.03

こんにちは、素人エンジニアです。
唐突に、HTMLの要素を回転させたくなることがあると思います。
わたしも、なんだか無性にくるくるしたくなりました。
そんな時はtransform: rotate()を使うと簡単にくるくるできるようです。

transform: rotate(回転させる角度);

See the Pen rotate by amateur-engineer (@amaeng) on CodePen.

このサンプルでは、マウスオーバーさせることで、四角形が２秒かけて360度回転します。

.rotate:hover {
  transform: rotate(360deg);
}

transformプロパティは、要素を移動や回転させたり、伸縮や傾斜の変形を加えることができるものです。回転させるには、rotate(角度)で回転させたい角度を指定します。

今回は、回転していることがわかるように、transitionを設定しました。

.rotate {
  height: 50px;
  width: 50px;
  border: none;
  padding: 2px;
  text-align: center;
  color:white;
  background-color: #2196f3;
  transition: 2s;          
}

transitionプロパティでは、時間変化を表現できます。transision: 2s;とすれば、2秒かけて360度回転するようになります。

transformとtransitionを使えば、色々なアニメーションが作れそうですね。