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

初心者向けにCSSでtransform:rotateを使って要素を回転する方法について解説しています。transformプロパティを使うことで指定の要素を回転することが可能です。基本の書き方と実際の使用例を覚えて、サイトに動きをつけてみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

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

 

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

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

transform:rotateを使って要素を回転する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

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] HTML/CSSで挫折しない学習方法を動画で公開中

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

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

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コースを担当。

趣味は、ラジオと音楽と踊ること。

 

大石ゆかり

CSSでtransform:rotateを使って要素を回転させる方法が分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

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

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