CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのrotate()関数の使い方 – 要素を回転させる方法を解説

CSSのrotate()関数とは？

CSSのrotate()関数は、要素を回転させるための変換関数です。transformプロパティと組み合わせて使用し、指定した角度だけ要素を回転させることができます。

引数には回転角度を指定します。単位はdeg（度）やrad（ラジアン）などが利用可能で、正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。

指定できる角度の単位

  • deg（度）：360degで1回転
  • rad（ラジアン）：約6.28rad（2π）で1回転
  • grad（グラード）：400gradで1回転
  • turn（回転数）：1turnで1回転

使用例

以下の例では、複数の段落要素を表示し、そのうちの1つ（#demo6）にrotate(45deg)を適用して、45度回転させています。

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
    background-color:rgba(108,111,35,0.6);
    font-size:35px;
    color:yellow;
    transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>

出力結果

CSSのrotate()関数の使い方 – 要素を回転させる方法を解説

まとめ

rotate()関数を使えば、CSSだけで簡単に要素を回転させることができます。角度の単位はdegが最も一般的ですが、用途に応じてradやturnなども使い分けると便利です。ホバーエフェクトやアニメーションと組み合わせれば、より動的な表現も可能になります。

  1. CSSの:lang()疑似クラスセレクターとは？使い方と実践的なサンプルコードを解説

    CSSの:lang()疑似クラスセレクターは、要素に指定されたlang属性の値に基づいて要素を選択するためのセレクターです。これにより、コンテンツに関連付けられた特定の言語をターゲットにして、言語ごとに異なるスタイルを適用できます。多言語対応サイトでフォントや装飾を言語別に切り替えたい場合などに非常に便利な機能です。構文（シンタックス）:lang()疑似クラスの基本構文は以下の通りです。:lang(言語コード){ /* スタイル宣言 */ }引数には「ja」（日本語）、「en」（英語）、「it」（イタリア語）といったBCP 47形式の言語タグを指定します。なお、:lang()はlang

  2. CSSの:last-child疑似クラスとは？使い方を実例付きで解説

    CSSの :last-child 疑似クラスは、ある親要素の中で「最後の子要素」となる要素を選択するためのセレクタです。リストの最終項目だけ色を変えたい、表の右端の列だけ罫線を引きたい、といった場面で非常に便利です。基本構文:last-child の書き方は以下の通りです。:last-child {     /* 宣言（スタイル定義） */ }例1：テーブルの最後の列にスタイルを適用するまずは、表（table）に対して :last-child を使った具体例を見てみましょう。<!DOCTYPE html> <html> <h