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

CSSのtransformプロパティで要素を指定した角度で回転させる方法

CSSでは、transformプロパティのrotate()関数を使うことで、要素を任意の角度で簡単に回転させることができます。本記事では、実際のコード例を通じて、角度を指定した要素の回転方法を解説します。

rotate()関数の基本

rotate()関数は、要素の中心を基準点として回転を行います。角度はdeg(度)単位で指定し、正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。

また、古いバージョンのInternet ExplorerやSafariなどに対応させる場合は、ベンダープレフィックス(-ms-transform、-webkit-transform)を併せて記述する必要があります。

コード例

以下の例では、2つのdiv要素を表示し、2つ目の要素だけを20度回転させています。

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(20deg);

            /* Safari */
            -webkit-transform: rotate(20deg);

            /* 標準構文 */
            transform: rotate(20deg);
         }
      </style>
   </head>
   <body>
      <div>
         Tutorialspoint.com
      </div>
      <div id = "myDiv">
         Tutorialspoint.com
      </div>
   </body>
</html>

実行結果

このコードを実行すると、1つ目のdiv要素はそのまま水平に表示され、2つ目のdiv要素(idが「myDiv」)は20度時計回りに傾いて表示されます。背景色がピンクで黒い枠線を持つ2つのボックスが並び、下側のボックスだけが斜めに回転していることが確認できます。

ポイントまとめ

  • transform: rotate(角度)で要素を回転できる。
  • 角度の単位はdeg。正の値は時計回り、負の値は反時計回り。
  • 回転の基準点はデフォルトで要素の中心。transform-originプロパティで変更可能。
  • 古いブラウザへの対応には-ms-や-webkit-などのベンダープレフィックスを使用する。
  1. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用

  2. CSSでウィンドウの高さ100%のDIVを作成する方法

    CSSのheightプロパティを使うと、要素の高さを自由に指定できます。ウィンドウ（ビューポート）の高さいっぱいに要素を表示したい場合は、heightプロパティとvh単位を組み合わせるのが一般的です。この記事では、ウィンドウの高さ100%のDIVを作成する具体的な方法を、サンプルコード付きでわかりやすく解説します。heightプロパティの構文CSSのheightプロパティは、次のように記述します。Selector {    height: /*値*/ }値にはpxや%などの絶対・相対単位を指定できます。親要素に対する割合（%）で高さを指定する場合、親要素にも明示的に高さが設