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

CSSでY軸方向のスキュー変換（skewY）を定義する方法

CSSでは、skewY() 関数を使うことで、要素をY軸（縦）方向に傾斜させるスキュー変換を簡単に定義できます。角度を指定すると、要素の上下がその角度に応じて傾いた状態で表示されます。

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

サンプルコード

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

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

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

実行結果

CSSでY軸方向のスキュー変換（skewY）を定義する方法

コードのポイント

  • transform: skewY(20deg); は標準的な記述方法で、最新のブラウザであればこの1行だけで動作します。
  • -ms-transform は Internet Explorer 9 用、-webkit-transform は Safari など古いWebKit系ブラウザ用のベンダープレフィックスです。
  • 上の例では、2つ目の div 要素だけが20度傾いて表示され、通常の要素との違いがひと目でわかります。

なお、X軸方向に傾けたい場合は skewX() を、両方の軸に同時に適用したい場合は skew(x角度, y角度) を使用してください。

  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などの主要ブ