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

CSS3のrotateX()でX軸方向に要素を回転させる方法

CSS3では、rotateX(angle)メソッドを使うことで、要素をX軸（横軸）を基準に回転させることができます。この3D変換機能を使うと、要素が水平な軸を中心に前後に傾くような立体感のあるアニメーション表現が可能になります。

rotateX()の基本構文

transform: rotateX(角度);

角度にはdeg（度数法）などの単位を指定します。正の値を指定すると要素の手前側が奥に倒れ込むように回転し、負の値を指定すると逆方向に回転します。

実装例

以下の例では、通常のdiv要素と、rotateX(150deg)を適用したdiv要素を並べて比較できるようにしています。

<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>
         tutorialspoint.com
      </div>
      <p>X軸を基準に回転</p>
      <div id = "myDiv">
         tutorialspoint.com
      </div>
   </body>
</html>

コードの解説

  • すべてのdiv要素に対して、幅200px・高さ100px・ピンク色の背景・黒い枠線を共通スタイルとして設定しています。
  • IDが「myDiv」の要素にのみtransform: rotateX(150deg)を指定し、X軸を中心に150度回転させています。
  • -webkit-transformは古いSafariなどWebKit系ブラウザ向けのベンダープレフィックスです。現在の主要ブラウザでは標準のtransformプロパティのみで動作しますが、互換性を考慮して併記しておくと安心です。

表示結果

ブラウザでこのHTMLファイルを開くと、上段には通常の状態のボックスが表示され、下段にはX軸を中心に150度傾いた（上下が反転したような）ボックスが表示されます。これにより、rotateX()による3D回転の効果を視覚的に確認できます。

補足：より立体的に見せるためのヒント

  • 親要素にperspectiveプロパティを設定すると、遠近感のある自然な3D回転になります。
  • transitionプロパティと組み合わせれば、ホバー時に要素が回転するインタラクティブな演出も簡単に実装できます。
  • 同様の3D変換として、Y軸回転のrotateY()やZ軸回転のrotateZ()もあります。
  1. CSS3を使ったZ軸方向の3D変換（rotateZ）の実装方法

    CSS3では、transformプロパティとrotateZ()関数を組み合わせることで、要素をZ軸（画面に垂直な軸）を中心に回転させることができます。ここでは、実際に動作するサンプルコードを紹介します。 実装例 以下のコードでは、ピンク色のdiv要素をZ軸を中心に90度回転させています。古いSafariなど一部のブラウザに対応させるため、ベンダープレフィックス付きの-webkit-transformも併せて指定しています。 <html>    <head>       <style>    

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

    CSS3では、rotateZ(angle) メソッドを使うことで、要素をZ軸（奥行き方向）を基準に回転させることができます。Z軸は画面の手前から奥へと伸びる軸のため、実際には2D回転のように見えますが、3D変換の一部として扱われます。rotateZ() の基本構文transform: rotateZ(角度);角度には deg（度数法）や rad（ラジアン）などの単位を指定できます。正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。使用例以下の例では、rotateZ(90deg) を使ってdiv要素を90度回転させています。<html>