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

CSSでX軸方向のスキュー変換を定義する方法（skewXの使い方）

CSSでは、transformプロパティにskewX()関数を指定することで、要素をX軸（水平方向）に傾斜させることができます。角度の値が大きいほど、要素は水平方向に強く歪みます。

以下のコードを実行して、X軸に沿ったスキュー変換の動作を確認してみましょう。

サンプルコード

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

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

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

出力結果

上記のコードを実行すると、次のように表示されます。下側の要素だけがX軸方向に20度傾斜していることがわかります。

CSSでX軸方向のスキュー変換を定義する方法（skewXの使い方）

ポイント解説

  • skewX(20deg)：要素をX軸方向に20度傾斜させます。値には正負の角度（deg）を指定できます。
  • ベンダープレフィックス：古いブラウザ（IE 9やSafariなど）に対応させるため、-ms-transformや-webkit-transformも併せて記述しています。現在のモダンブラウザでは標準のtransformだけで動作します。
  • Y軸方向に傾けたい場合は、skewY()を使用します。両方を同時に指定したい場合は、skew(20deg, 10deg)のように記述します。
  1. CSS3でフレックスアイテムを交差軸（クロス軸）に沿って整列する方法

    CSS3でフレックスボックス内のアイテムを交差軸（クロス軸）に沿って整列させるには、align-itemsプロパティを使用します。このプロパティは、主軸に対して垂直な方向である交差軸上でのアイテムの配置位置を制御します。 align-itemsプロパティの主な値 stretch（初期値）：コンテナの高さに合わせてアイテムを引き伸ばして表示します center：交差軸の中央にアイテムを配置します flex-start：交差軸の始端にアイテムを配置します flex-end：交差軸の終端にアイテムを配置します baseline：テキストのベースラインに合わせてアイテムを配置します コード例 &l

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

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