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

CSS3の3D変換入門！rotateXで要素を立体的に回転させる方法

CSS3の3D変換（3D Transforms）を利用すると、要素をX軸（横方向）・Y軸（縦方向）・Z軸（奥行き方向）の3つの軸に沿って移動・回転させることができます。2D変換だけでは表現できなかった立体感のある演出を、CSSだけで手軽に実装できるのが大きな魅力です。

主な3D変換メソッド

  • rotateX() … X軸を基準に要素を回転させます
  • rotateY() … Y軸を基準に要素を回転させます
  • rotateZ() … Z軸を基準に要素を回転させます
  • translateZ() … Z軸方向（奥行き）へ要素を移動させます
  • scale3d() … 3軸それぞれの方向に要素を拡大・縮小します
  • matrix3d() … 行列を指定して複雑な3D変換を行います

サンプルコード

以下は、rotateX() を使ってX軸方向に要素を回転させるシンプルな例です。

<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>
         My website
      </div>
      <p>
         Rotate X-axis
      </p>
      <div id = "myDiv">
         My website
      </div>
   </body>
</html>

実行結果

CSS3の3D変換入門！rotateXで要素を立体的に回転させる方法

このコードを実行すると、上段のdiv要素はそのまま表示され、「Rotate X-axis」のテキスト下にある div#myDiv のみが、X軸を中心として150度回転して表示されます。

ポイント解説

古いSafariなど一部のブラウザに対応させるため、ベンダープレフィックス付きの -webkit-transform も併せて記述しています。また、3D変換の奥行き感をより自然に見せたい場合は、親要素に perspective プロパティを設定すると効果的です。perspective を指定することで、視点からの距離に応じた遠近感が生まれ、よりリアルな立体表現が可能になります。

  1. CSS3のtransitionショートハンド（短縮）プロパティの使い方

    CSSのtransitionショートハンド（短縮）プロパティを使うと、transition-property（遷移対象のプロパティ）、transition-duration（遷移にかかる時間）、transition-timing-function（変化の速度カーブ）、transition-delay（遅延時間）という4つの個別プロパティを、たった1行にまとめて指定することができます。値は「プロパティ名 → 時間 → タイミング関数 → 遅延」の順にスペース区切りで記述します。複数のプロパティを同時にアニメーションさせたい場合は、それぞれの指定をカンマ（,）で区切って並べます。記述例以下は、tr

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

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