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

CSSのmatrix()行列変換を使ってdivを回転させる方法

CSSでは、matrix() 関数を使った行列変換によって、div要素などのHTML要素を回転・傾斜させることができます。以下のコードを実行して、実際の表示結果を確認してみましょう。

サンプルコード

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
            /* IE 9 */
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
            /* Safari */
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
            /* 標準構文 */
            transform: matrix(1, -0.3, 0, 1, 0, 0);
         }
      </style>
   </head>
   <body>
      <div>
         Welcome to my website.
      </div>
      <div id = "myDiv1">
         Welcome to my website.
      </div>
   </body>
</html>

出力結果

CSSのmatrix()行列変換を使ってdivを回転させる方法

解説：matrix() 関数とは

matrix() 関数は、6つの引数 matrix(a, b, c, d, e, f) を受け取ることで、2Dの変換行列を一度に指定できる便利な関数です。上記の例では matrix(1, -0.3, 0, 1, 0, 0) を指定しており、第2引数（b）に負の値を設定することで、要素が傾いて回転したような見た目になります。

各引数の役割は以下の通りです。

  • a：水平方向のスケーリング
  • b：垂直方向の傾斜（スキュー）
  • c：水平方向の傾斜（スキュー）
  • d：垂直方向のスケーリング
  • e：水平方向の移動量
  • f：垂直方向の移動量

なお、単純に要素を回転させたいだけなら rotate() 関数の方が直感的で扱いやすいでしょう。matrix() は、拡大縮小・傾斜・移動など複数の変換を組み合わせた複雑な表現を行いたい場合に特に有効です。また、サンプル内のベンダープレフィックス（-ms- や -webkit-）は旧ブラウザ向けの記述で、現在の主要ブラウザでは標準の transform プロパティだけで正しく動作します。

  1. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下

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

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