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

CSS3のrotateX()を使ったX軸方向の3D変換の実装方法

CSS3では、transformプロパティにrotateX()関数を指定することで、要素をX軸（水平軸）を中心に立体的に回転させることができます。以下のサンプルコードを実行して、X軸方向の3D変換がどのように表示されるかを実際に確認してみましょう。

サンプルコード

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }  
         div#myDiv {
            -webkit-transform: rotateX(150deg);
            /* Safari */ transform: rotateX(150deg);
            /* 標準の構文 */
         }
      </style>
   </head>
   <body>
      <div>
         tutorials point.com
      </div>
      <p>
         Rotate X-axis
      </p>
         <div id = "myDiv">
            tutorials point.com.
         </div>
   </body>
 </html>

コードのポイント

  • rotateX(150deg)：要素をX軸を中心に150度回転させます。正の値を指定すると上端が奥側へ傾き、負の値を指定すると手前側へ傾きます。
  • -webkit-transform：SafariなどWebKit系ブラウザ向けのベンダープレフィックスです。標準仕様のtransformと併記することで、幅広いブラウザで同じ表示結果を得られます。
  • perspective：親要素にこのプロパティを追加すると、より自然な奥行き感のある3D効果を表現できます。

このコードを実行すると、通常状態のピンク色のボックスと、X軸を中心に150度回転したボックスが並んで表示され、3D変換の効果を視覚的に比較できます。角度の数値を変更しながら試すことで、rotateX()の挙動を直感的に理解できるでしょう。

  1. CSS3フレキシブルボックスレイアウト（Flexbox）の基本と使い方

    CSS3には「フレキシブルボックス（Flexible Box）」と呼ばれるレイアウトモードが用意されており、一般的にFlexbox（フレックスボックス）として知られています。Flexboxを活用すれば、複雑なWebアプリケーションやWebページのレイアウトも、従来のfloatやpositionを使った手法に比べて、はるかに簡単かつ柔軟に構築できます。Flexboxは「コンテナ（親要素）」と「フレックスアイテム（子要素）」で構成されます。コンテナに指定できる主なプロパティは以下のとおりです。flex-direction：アイテムが並ぶ方向（主軸の向き）を指定しますflex-wrap：アイテムの折

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

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