CSS プロパティ perspective

CSS プロパティ perspective：3 次元空間を操る魔法

CSS プロパティ perspective：3 次元空間を操る魔法

この記事では、Web ページの要素に魔法のように 3 次元空間の視覚効果を与える CSS プロパティ `perspective` について詳しく解説します。`perspective` の仕組み、構文、そして `transform` プロパティと組み合わせることで実現できる驚くべき 3D 変形効果について、初心者の方にも分かりやすく説明していきます。

目次

  1. `perspective` プロパティを理解する
  2. `perspective` と `transform-style` の連携
  3. `perspective()` 関数を使用する
  4. ブラウザの互換性
  5. 使用例
  6. まとめ
  7. よくある質問

1. `perspective` プロパティを理解する

`perspective` プロパティは、観察者と z = 0 平面との距離を定義することで、3 次元的な奥行き感を表現します。

例え: 絵画を見るときを想像してみてください。`perspective` の値は、あなたとキャンバスとの距離のようなものです。距離が近ければ近くほど、遠近感が強くなります。

以下は、異なる `perspective` 値が要素の視覚効果にどのように影響するかを示すサンプルコードです。 


<div class="container perspective-200">
  <div class="box"></div>
</div>

<div class="container perspective-500">
  <div class="box"></div>
</div>

<div class="container perspective-1000">
  <div class="box"></div>
</div>

`perspective` の値と遠近感の強さの関係は反比例します。つまり、値が小さいほど遠近感は強くなり、値が大きいほど遠近感は弱くなります。

2. `perspective` と `transform-style` の連携

`perspective` プロパティは、`transform-style: preserve-3d;` と組み合わせて使用することで、よりリアルな 3D シーンを作成できます。

`transform-style: preserve-3d;` は、子要素が 3 次元空間内で正しくレンダリングされるようにし、平面化されないようにします。

以下は、親要素に `perspective` と `transform-style` を設定し、子要素に 3D 変換を適用する例です。 


<div class="container perspective-500 preserve-3d">
  <div class="box rotate"></div>
</div>

3. `perspective()` 関数を使用する

`perspective` プロパティに加えて、`transform` プロパティ内で `perspective()` 関数を使用することでも遠近効果を作成できます。

`perspective()` 関数の構文と使い方は以下の通りです。 


transform: perspective(値);

`perspective` プロパティと `perspective()` 関数の違いは、適用範囲です。

  • `perspective` プロパティは、要素自身とその子要素に適用されます。
  • `perspective()` 関数は、関数を適用した要素のみに影響します。

以下は、`perspective` プロパティと `perspective()` 関数を異なる要素に適用した例です。 


<div class="container perspective-500">
  <div class="box" style="transform: perspective(200px) rotateY(45deg);"></div>
</div>

4. ブラウザの互換性

`perspective` プロパティと `perspective()` 関数は、主要なブラウザで広くサポートされています。ただし、一部の古いブラウザではサポートされていない場合があります。

最新のブラウザの互換性については、Can I use を参照してください。

5. 使用例

以下は、一般的な 3D 変換効果の例です。

  • 回転する立方体
  • 裏返すカード
  • スライドするカルーセル

これらの例については、CodePen などのオンラインエディタでコードを確認できます。

6. まとめ

この記事では、CSS プロパティ `perspective` と `perspective()` 関数を使用して、Web ページに奥行きと 3 次元効果を追加する方法を学びました。これらの機能を使用すると、より魅力的でインタラクティブなユーザーエクスペリエンスを作成できます。

よくある質問

  1. Q: `perspective` と `perspective()` 関数のどちらを使うべきですか？
    A: 要素自身とその子要素に遠近効果を適用する場合は `perspective` プロパティを、特定の要素のみに適用する場合は `perspective()` 関数を使用します。
  2. Q: 3D 変換効果が期待通りに表示されません。
    A: `transform-style: preserve-3d;` プロパティが正しく設定されているか確認してください。また、ブラウザの互換性も確認してください。
  3. Q: さらに高度な 3D 効果を作成するにはどうすればよいですか？
    A: `rotateX`, `rotateY`, `rotateZ`, `translateX`, `translateY`, `translateZ` などの他の `transform` 関数を `perspective` と組み合わせて使用します。