CSSでtransform:rotateを使って要素を回転させる方法を現役エンジニアが解説【初心者向け】

CSSでtransform:rotateを使って要素を回転させる方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

 

CSSで要素を回転させるには

CSSで要素を回転させる場合、要素の変形が行えるtransformプロパティを使用します。

transformを使用することで、要素を回転させたり拡大縮小したり移動したりすることが可能です。

そして、回転させたい場合は、transformのrotate()を使用してください。

 

transform:rotate()の使い方と解説

transform:rotateは以下のように書きます。

transform:rotate(100deg); /*100度回転させる*/

()には回転させたい角度を、degree(度)を表すdegをを使用し指定しましょう。

HTML

<span class="r45">45°</span>
<span class="r90">90°</span>
<span class="r135">135°</span>
<span class="r180">180°</span>

CSS

body{
  font-family:sans-serif;
  margin:30px;
}
span{
  display:inline-block;
  width:100px;
  height:100px;
  margin:20px;
  background:gold;
  line-height:100px;
  text-align:center;
}
.r45{
  transform:rotate(45deg);
}
.r90{
  transform:rotate(90deg);
}
.r135{
  transform:rotate(135deg);
}
.r180{
  transform:rotate(180deg);
}

 

実行結果

See the Pen
qBBQRMy by marihashimoto (@mari877)
on CodePen.

transform:rotate()を使用すると、マウスが乗った時のアクションとして要素を傾けたり、回転させるなどの動きをつけることも簡単です。

また。読み込み中を表すプリローダーのアニメーション画像なども簡単に作成できます。

 

[PR] Webデザインで副業する学習方法を動画で公開中

実際に要素を回転させてみよう

ここでは、マウスが乗った時に要素が回転するアニメーションとプリローダー画像のようなアニメーションを作成してみましょう。

HTML

<span class="c1">Touch me!</span>
<span class="c2">Touch me!</span>
<span class="c3">Touch me!</span>
<br>
<span class="l1"></span>
<span class="l2"></span>

CSS

body{
  font-family:sans-serif;
  margin:30px;
}
span{
  display:inline-block;
  width:100px;
  height:100px;
  margin:20px;
  background:gold;
  line-height:100px;
  text-align:center;
  cursor:pointer;
}
.c1{
  transition:.2s;
}
.c2{
  transform:rotate(-45deg);
  transition:.5s ease-in;
}
.c3{
  background:none;
  border-radius:100%;
  border:5px dashed gold;
  transition:3s ease-in-out;
}
.c1:hover{
  background:orange;
  transform:rotate(-5deg);
}
.c2:hover{
  background:tomato;
  border-radius:100%;
  transform:rotate(45deg);
}
.c3:hover{
  background:none;
  transform:rotate(-1080deg);
}
.l1{
  width:30px;
  height:30px;
  animation:loader 1s linear infinite;
}
.l2{
  width:50px;
  height:50px;
  box-sizing:border-box;
  border:tomato 25px solid;
  border-bottom:gold 25px solid;
  border-left:royalblue 25px solid;
  border-right:limegreen 25px solid;
  border-radius:100%;
  background:none;
  animation:loader 1s ease-in-out alternate infinite;
}
@keyframes loader{
  to{ transform:rotate(360deg); }
}

 

実行結果

See the Pen
MWYbaOv by marihashimoto (@mari877)
on CodePen.

今回はtransitionとanimationを使用して、回転のアニメーションを作成しました。

 

執筆してくれたメンター

橋本真理 web/グラフィックデザイナー。 webサイトのデザインからコーディング等一式、ロゴや各種広告などのデザインやイラストを描いたりしています。 TechAcademyではWebデザインコース・WordPressコースを担当。 趣味は、ラジオと音楽と踊ること。

 

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。