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

CSS3のrotateZ()を使ってZ軸方向に要素を回転させる方法

CSS3では、rotateZ(angle) メソッドを使うことで、要素をZ軸（奥行き方向）を基準に回転させることができます。Z軸は画面の手前から奥へと伸びる軸のため、実際には2D回転のように見えますが、3D変換の一部として扱われます。

rotateZ() の基本構文

transform: rotateZ(角度);

角度には deg（度数法）や rad（ラジアン）などの単位を指定できます。正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。

使用例

以下の例では、rotateZ(90deg) を使ってdiv要素を90度回転させています。

<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">
         tutorials point.com.
      </div>
   </body>
</html>

実行結果

CSS3のrotateZ()を使ってZ軸方向に要素を回転させる方法

ポイント解説

  • -webkit-transform：古いSafariなどWebKit系ブラウザ向けのベンダープレフィックスです。現在の主要ブラウザでは標準の transform プロパティがサポートされているため、必須ではありませんが、互換性のために併記されることがあります。
  • 回転の中心：デフォルトでは要素の中心が回転の基準点になります。transform-origin プロパティを使えば、基準点を変更できます。

関連する3D変換メソッド

Z軸以外にも、以下のメソッドで3D回転を行うことができます。

  • rotateX(角度)：X軸を基準に回転
  • rotateY(角度)：Y軸を基準に回転
  • rotate3d(x, y, z, 角度)：3つの軸をまとめて指定して回転

これらを組み合わせることで、より立体的なアニメーションや演出を実現できます。

  1. CSS3の2D変換関数（transform）の使い方を徹底解説

    CSS3の2D変換（2D transforms）は、要素を移動（translate）・回転（rotate）・拡大縮小（scale）・傾斜（skew）させることで、見た目や配置を自由に変更できる強力な機能です。アニメーションやインタラクティブなデザインにも欠かせないテクニックとして広く使われています。 主な2D変換関数の一覧 以下に、よく使用される代表的な2D変換関数をまとめました。 番号関数と説明 1matrix(n,n,n,n,n,n)6つの値を使って行列（マトリックス）による変換を定義します。すべての変換を1つの関数で表現できます。 2translate(x,y)要素をX軸方向とY

  2. CSS3の3D変換関数の使い方を徹底解説！matrix3dやtranslate3dの基本

    CSS3の3D変換（3D Transform）を活用すると、要素をX軸・Y軸に加えてZ軸（奥行き）方向にも移動させることができます。2D変換では表現できない立体感のある演出が可能になり、モダンなWebデザインにおいて非常に強力な機能です。 CSS3で使える主な3D変換関数 3D変換を呼び出すために使用される主なメソッドは以下の通りです。 番号値と説明 1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)16個の値からなる行列を使用して、要素を変換します。 2translate3d(x,y,z)X軸・Y軸・Z軸の3つの値を使って、要素を移動します。 3t