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

CSSのperspective-originプロパティとは？3D要素の視点位置を指定する方法

CSSのperspective-originプロパティは、3D変形された要素を見る「視点（消失点）」の位置を指定するためのプロパティです。perspectiveプロパティと組み合わせて使うことで、3D空間における奥行き表現の見え方を細かくコントロールできます。

perspective-originプロパティの基本

通常、視点は要素の中央に設定されますが、perspective-originを使えば、左右・上下など任意の位置に移動させることが可能です。指定できる主な値は以下のとおりです。

  • キーワード値： left / center / right / top / bottom の組み合わせ（例： left、top center）
  • パーセンテージ： 要素の幅・高さに対する割合で指定（例： 25% 75%）
  • 長さ（px、emなど）： 要素の左上隅からの距離で指定（例： 50px 100px）
  • 初期値： 50% 50%（要素の中央）

なお、このプロパティは親要素（3D空間を定義する要素）に適用され、子要素の3D表示に影響を与えます。

実装例：視点を左側に設定する

以下のコードでは、親要素にperspective: 80px;とperspective-origin: left;を指定し、子要素をX軸方向に45度回転させています。視点が左側にあるため、回転したオレンジ色のボックスが右寄りの遠近感で表示されます。

<!DOCTYPE html>
<html>
<head>
  <style>
    .demo1 {
      position: relative;
      width: 150px;
      height: 150px;
      background-color: yellow;
      perspective: 80px;
      margin: 50px;
      perspective-origin: left;
    }
    .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>

コードのポイント解説

  • .demo1（親要素）： perspective: 80px;で3D空間の深さを定義し、perspective-origin: left;で視点を要素の左端中央に配置しています。
  • .demo2（子要素）： transform-style: preserve-3d;で3D空間を維持し、transform: rotateX(45deg);でX軸を中心に45度回転させています。

perspective-originの値をrightやcenter topなどに変更して保存すると、視点の位置によって3D要素の見え方がどのように変化するかを確認できます。3DカードUIや立体アニメーションを作成する際に、ぜひ活用してみてください。

  1. CSSのposition: static;とは？デフォルトの配置方法をわかりやすく解説

    CSSのposition: static;は、要素の位置を「静的（スタティック）」に設定するプロパティ値です。実はこれが、すべての要素に初期状態で適用されているデフォルトの位置指定です。 position: static; の基本的な特徴 position: static;が指定された要素は、通常のドキュメントフローに従って配置されます。ここで重要なポイントは、次のとおりです。 HTMLの記述順序どおりに、上から下へ自然に配置される top・bottom・left・rightプロパティを指定してもまったく効果がない z-indexによる重なり順の制御も適用されない つまり、位置をずらしたい

  2. CSSのposition: fixed;とは？要素を画面に固定する方法を実例付きで解説

    CSSの position: fixed; プロパティを使用すると、要素をビューポート（ブラウザの表示領域）を基準として配置できます。このプロパティが適用された要素は、ページをスクロールしても画面上の同じ位置に固定され続けるのが特徴です。ヘッダーバーやフッター、SNSボタンなど、常に画面内に表示しておきたい要素の実装によく使われます。position: fixed; のサンプルコード以下のコードでは、div要素に対して position: fixed; を設定し、画面右下に固定表示しています。実際にコードを実行して動作を確認してみてください。<!DOCTYPE html> <