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

CSSでdivを-20度の角度に回転させる方法

CSSの transform プロパティと rotate() 関数を使うことで、div要素を任意の角度に回転させることができます。負の値（例： -20deg）を指定すると、反時計回りに回転します。

rotate() の基本的な使い方

transform: rotate(-20deg); を要素に指定するだけで、その要素が基準点（デフォルトでは中心）を軸として-20度回転します。古いブラウザへの対応のため、ベンダープレフィックス（-ms-、-webkit- など）も併せて記述しておくと安心です。

サンプルコード

以下のコードを実行すると、divを-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>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
   
</html>

コードの解説

  • 共通スタイル： すべてのdiv要素に対して、幅300px・高さ100px・ピンク色の背景・黒い枠線を設定しています。
  • #myDiv のスタイル： IDが「myDiv」の要素だけに rotate(-20deg) を適用し、反時計回りに20度傾けています。
  • ベンダープレフィックス： -ms-transform はIE9用、-webkit-transform はSafariなどWebKit系ブラウザ用の記述です。現在のモダンブラウザでは標準の transform のみで十分ですが、互換性確保のために残しておくことがあります。

実行結果

上記のコードをブラウザで表示すると、1つ目のdivはそのまま表示され、2つ目のdiv（myDiv）のみが反時計回りに20度回転して表示されます。

CSSでdivを-20度の角度に回転させる方法
  1. CSSを使ってユーザー評価スコアカードを作成する方法

    CSSとFont Awesomeのアイコンフォントを組み合わせれば、レビューサイトやECサイトでおなじみの「ユーザー評価」スコアカードを簡単に作成できます。平均評価を示す星アイコンと、各星の評価件数を視覚化したプログレスバー（進捗バー）を並べることで、訪問者にとって直感的に分かりやすい評価パネルを実現できます。 実装例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ