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

CSS3を使ったZ軸方向の3D変換（rotateZ）の実装方法

CSS3では、transformプロパティとrotateZ()関数を組み合わせることで、要素をZ軸（画面に垂直な軸）を中心に回転させることができます。ここでは、実際に動作するサンプルコードを紹介します。

実装例

以下のコードでは、ピンク色のdiv要素をZ軸を中心に90度回転させています。古いSafariなど一部のブラウザに対応させるため、ベンダープレフィックス付きの-webkit-transformも併せて指定しています。

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg);
            /* Safari */
            transform: rotateZ(90deg);
            /* 標準の記述方法 */
         }
      </style>
   </head>
   <body>
      <p>Z軸を中心に回転</p>
      <div id = "zDiv">
         tutorialspoint.com.
      </div>
   </body>
</html>

出力結果

CSS3を使ったZ軸方向の3D変換（rotateZ）の実装方法

ポイント解説

rotateZ(90deg)は、要素をZ軸を基準に時計回りに90度回転させます。Z軸は画面の手前から奥へ伸びる軸のため、見た目としては要素が平面上で回転しているように表示されます。

なお、角度の指定には「deg（度）」以外にも、「rad（ラジアン）」や「turn（回転数）」などの単位を使用できます。また、モダンブラウザでは標準構文のtransformだけで十分対応可能ですが、互換性を考慮してベンダープレフィックスを残しておくケースもあります。

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