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

CSSのperspectiveプロパティの使い方を解説！3D要素の奥行き表現

CSSの perspective プロパティは、3D変形された要素をどのような視点・奥行き感で表示するかを指定するためのプロパティです。値には距離（pxなど）を設定し、数値が小さいほど視点に近づくため、遠近感が強調され、大きいほどフラットな見た目になります。

通常は、3D変形を適用する子要素の親要素に perspective を設定します。これにより、子要素の transform による回転や移動に自然な立体感が生まれます。

以下のコードでは、親要素に perspective: 80px; を指定し、子要素を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: 親要素に指定し、3D空間の視点の深さ（距離）を決める。
  • transform-style: preserve-3d: 子要素にも3D空間を維持させたい場合に指定する。
  • rotateX / rotateY / rotateZ: 各軸を基準に要素を回転させる。

値をいろいろ変更しながら表示を確認すると、遠近効果の違いがよく理解できるでしょう。

  1. CSSのborder-left-widthプロパティで左ボーダーの幅を指定する方法

    CSSのborder-left-widthプロパティは、要素の左側の境界線（ボーダー）の太さを変更するために使用します。このプロパティを使うことで、左ボーダーだけの幅を個別に調整できます。使用例以下のコードは、border-left-widthプロパティを実装した実際の例です。<html>    <head>    </head>    <body>       <p style = "border-left-width:6px;border

  2. CSSのlist-style-typeプロパティでリストの行頭記号を自由に変更する方法

    CSSのlist-style-typeプロパティを使用すると、リスト項目の先頭に表示されるマーカー(行頭記号)の形状や見た目を自由にコントロールできます。デフォルトの黒丸(disc)だけでなく、白丸や四角、数字、アルファベットなど、さまざまなスタイルを指定できるのが特徴です。 list-style-typeの主な値 disc:黒丸(初期値) circle:白丸(中抜きの丸) square:塗りつぶしの四角形 decimal:算用数字(1、2、3...) lower-alpha:小文字アルファベット(a、b、c...) upper-alpha:大文字アルファベット(A、B、C...) none