HTML

コピペで簡単 CSS で要素を回転させる方法

コピペで簡単 CSS で要素を回転させる方法を紹介します。
例えば、デザインのアクセントでテキストや画像を斜めや回転させて見せたい時に便利な方法です。

  1. CSSで要素を回転させる方法
  2. 回転アニメーション
  3. 要素に hover した時に回転

CSSで要素を回転させる方法

CSS で要素を回転させるには CSS の transform プロパティで rotate() を指定します。
rotate() を指定した場合の見た目はこんな感じです。

ななめ45°

ベースの HTML は次の通りです。

<div class="rotate">ななめ45°</div>

CSS は次の通りです。

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

数値は 0〜360 単位は deg を指定します。もちろんマイナスの指定もできます。

回転アニメーション

要素に回転する動きのアニメーション付与したい場合は、CSS の animation プロパティを使用します。
例えば、要素を無限に回転するように見せる場合の指定は次の通りです。

回転アニメーション
.rotate-anime {
animation: rotate-anime 3s linear infinite;
}
@keyframes rotate-anime {
0% {transform: rotate(0);}
100% {transform: rotate(360deg);}
}

要素に hover した時に回転

要素に hover した時に回転させる場合は、CSS の transition プロパティを使用します。
例えば、要素にマウスが hover した時に回転させる場合の指定は次の通りです。

要素に hover した時に回転
.rotate-hover {
transition: transform 0.3s ease-out;
}
.rotate-hover:hover {
transform: rotate(10deg);
}

まとめ

コピペで簡単 CSS で要素を回転させる方法を紹介しました。

スポンサーリンク

合わせて読みたい関連記事