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

CSSのskewY()関数でdivをY軸方向に傾斜変形させる方法

CSSの transform プロパティに skewY() 関数を指定すると、要素をY軸（縦）方向に傾斜させて表示できます。角度を指定するだけで簡単に実装でき、古いブラウザ向けのベンダープレフィックスも併記しておくと互換性が向上します。

サンプルコード

以下のコードを実行すると、通常のdivと、Y軸方向に20度傾斜させたdivの違いを確認できます。

<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>
         Welcome to my website.
      </div>
      <div id = "skewDiv">
         Welcome to my website.
      </div>
   </body>
</html>

コードのポイント

  • skewY(20deg)：要素をY軸方向に20度傾斜させます。値が正なら下方向へ、負なら上方向へ傾きます。
  • -ms-transform：Internet Explorer 9 に対応させるためのプレフィックスです。
  • -webkit-transform：古いバージョンのSafariやChromeなどWebKit系ブラウザに対応させます。
  • transform：標準の構文です。現在の主要ブラウザではこれだけで動作します。

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

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