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

CSSのmatrix()関数を使って別の方向へ要素を変形させる方法

CSSでは、transformプロパティのmatrix()関数を使うことで、要素を平行移動・回転・拡大縮小・傾斜（スキュー）など、さまざまな方向へ一括して変形できます。本記事では、要素を斜めの方向へ傾けながら変形させる具体例を紹介します。

実装例

以下のコードでは、2つのdiv要素を用意し、2つ目の要素に対してmatrix(1, 0, 0.5, 1, 150, 0)を適用しています。これにより、水平方向へ150px移動しつつ、垂直方向に傾いた変形が加わります。

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
            /* IE 9 */
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
            /* Safari */
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
            /* 標準の構文 */
            transform: matrix(1, 0, 0.5, 1, 150, 0);
         }
      </style>
   </head>
   <body>
      <div>
         Tutorialspoint.com
      </div>
      <div id = "myDiv2">
         Tutorialspoint.com
      </div>
   </body>
</html>

表示結果

CSSのmatrix()関数を使って別の方向へ要素を変形させる方法

matrix()関数の引数について

matrix()関数は6つの引数を受け取ります。

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

上記の例ではcの値が「0.5」になっているため、要素は水平方向に傾いた状態で描画されます。ベンダープレフィックス（-ms-や-webkit-）は古いブラウザ向けのもので、現在の主要ブラウザでは標準のtransformだけで動作します。

  1. CSSで基本のリストをリストグループに変換する方法

    CSSを使えば、シンプルなHTMLのリストを、境界線で区切られた見栄えのよい「リストグループ」へと変換できます。各項目（li要素）に枠線・背景色・パディングを指定するだけで、視覚的にまとまりのあるリストを簡単に作成できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>     

  2. CSSの2D変換関数（transform）とは？rotate・translate・scale・skewの使い方

    CSSの2D変換関数は、要素に対して回転・移動・拡大縮小・傾斜といった2次元の変換効果を適用するために使用されます。これらの関数を活用することで、JavaScriptなどに頼らずCSSだけで動きのあるデザインやアニメーション表現を手軽に実装できます。 主な2D変換関数の一覧 translate() － 要素をX軸・Y軸方向に移動させます。 scale() － 要素をX軸・Y軸方向に拡大または縮小します。 rotate() － 要素を指定した角度だけ回転させます。 skew() － 要素をX軸・Y軸方向に傾斜させます。 各関数の基本構文 translate(x, y)：指定した距離（px