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

CSSのperspectiveプロパティで3D要素の遠近感（パースペクティブ）を指定する方法

CSSの perspective プロパティを使うと、3D要素をどのような距離感・奥行きで表示するか（パースペクティブ＝遠近感）を指定できます。

perspectiveの値は「視点から要素までの距離」として機能し、数値が小さいほど視点に近くなり、立体感が強調されます。逆に数値が大きいほど、フラットな見た目に近づきます。

perspectiveプロパティの基本

親要素に perspective を設定すると、その子要素に対して3D変形（rotateX、rotateYなど）を適用した際に、自然な遠近効果が反映されるようになります。子要素側では transform-style: preserve-3d; を指定することで、3D空間が維持されます。

主な指定方法

  • 親要素に指定する場合： perspective: 80px; のように記述します。
  • 要素自身に指定する場合： transform 関数の perspective() を使うこともできます。

実装例

以下のコードでは、黄色い親要素（demo1）に perspective: 80px を設定し、内側のオレンジ色の子要素（demo2）をX軸方向に45度回転させています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .demo1 {
            position: relative;
            width: 150px;
            height: 150px;
            background-color: yellow;
            perspective: 80px;
            margin: 50px;
         }
         .demo2 {
            position: absolute;
            padding: 20px;
            background-color: orange;
            transform-style: preserve-3d;
            transform: rotateX(45deg);
         }
      </style>
   </head>
   <body>
      <h1>Rotation</h1>
      <div class = "demo1">Demo
         <div class = "demo2">Demo
         </div>
      </div>
   </body>
</html>

コードのポイント

  • perspective: 80px; … 視点までの距離を80pxに設定し、強めの遠近感を作り出しています。
  • transform-style: preserve-3d; … 子要素が3D空間内で変形できるようにします。
  • transform: rotateX(45deg); … 要素をX軸を基準に45度回転させ、傾いた立体として表示します。

このように perspective プロパティを活用することで、カードの反転アニメーションや立体的なUIエフェクトなど、表現の幅が大きく広がります。

  1. HTMLのspanタグを使ってインライン要素のスタイルを設定する方法

    HTMLで特定のテキスト部分にスタイルを適用したいときに活躍するのがタグです。spanタグは、インライン要素をグループ化し、その範囲に対して色やフォントなどのスタイルをまとめて指定するために使われます。spanタグの基本的な役割spanタグはそれ単独では画面上に何も変化をもたらさない汎用的なインラインコンテナです。しかし、style属性やclass属性と組み合わせることで、段落全体ではなく「文章のごく一部分」だけをピンポイントで装飾できるのが大きな特徴です。似た用途のdivタグがブロックレベル要素であるのに対し、spanタグはインライン要素であるため、テキストの流れを崩すことなく途中に挿入でき

  2. divタグを使ってHTML要素のスタイルを設定する方法

    <div>タグを使用すると、HTMLドキュメント内の特定のセクションを簡単に定義できます。複数のHTML要素をひとつのブロックにまとめ、そのまとまりに対して一括でスタイルを適用できるのが大きな特徴です。<div>タグはブロックレベル要素として扱われ、ページのレイアウト構造を作る際によく利用されます。次のコードを実行すると、<div>タグを使ってHTML要素にスタイルを適用する方法を実際に確認できます。ここでは、id=container を持つ要素に対してスタイルルールが適用されます。このように、id属性はCSSセレクターとして機能します。サンプルコード<