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

CSSを使用した別の方向への行列変換

次のコードを実行して、CSSを使用して別の方向に行列変換を試みることができます。

例

<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);
            /* Standard syntax */
            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を使用した別の方向への行列変換


  1. 基本リストをCSSでリストグループに変換するにはどうすればよいですか？

    基本リストをCSSで「リストグループ」に変換するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana

  2. CSSの2D変換関数

    2D変換関数は、要素に回転、移動、スケーリング、およびスキューできる2D変換を適用するために使用されます。 翻訳 −要素をx軸とy軸に沿って移動します。 スケール −要素のサイズをxy方向に変更します。 回転 −要素をある程度動かすため。 スキュー −要素をxy方向に傾斜させる。 以下は、CSSの2D変換関数を示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", T