この記事では、ウェブ上での基本的な3Dの概念について説明します。これらの概念をWebflowプロジェクトで実践する方法については、2D & 3D transformsガイドをチェックしてみてください。
このレッスンで学ぶこと
2Dの基本理解
3Dに入る前に、最初に最初の2つの次元がどのように動作するかを理解する必要があります。具体的には、水平方向のX軸に沿った移動と、垂直方向のY軸に沿った移動について話しています。
ウェブ上のほとんどのコンテンツは2D要素で構成されています。それには、画像、見出し、段落、ボタンなど、ウェブサイトで見るすべてのものが含まれます。これらの要素の幅と高さ、および他の要素との間の距離はすべて2つの次元で行われます。実際の「奥行き」はありません。
X軸およびY軸に沿った移動
要素が水平方向に移動するとき、X位置を調整しています。垂直方向に移動するときは、Y位置を調整しています。対角線上に移動する場合、XとYを組み合わせて使用します。
以上が2次元における位置づけ、すなわちX軸とY軸です。
Z軸の紹介
3Dモーションの最も素晴らしい点の一つは、パララックスの概念です。以下の例では、パララックスを説明するためにテーブルに立てかけたカードを使用しています。どのカードも移動していません。カメラを左右に移動させるだけです。カメラまたは視野をX軸に沿ってのみ移動させています。
一番近くの名刺がより速く移動しているように見えることに注意してください。そして、遠くのカードはよりゆっくりと移動しているように見えます。それらのオブジェクトの速度の違いが、私たちに近いものと遠いものの間の変位、すなわちパララックスです。
パララックスの概要
3Dモーションの優れた点のひとつに、視差のアイデアがあります。下の例では、視差を説明するためにテーブルの上にカードを立てています。カードはどれも動いておらず、カメラを左右に動かしているだけです。X軸に沿ってカメラや視野を動かしているだけです。
私たちの近くにあるカードがより速く動いているように見えることに注目してほしい。遠くの名刺の方がゆっくり動いているように見える。このズレ、つまり私たちに近い物体と遠い物体の速度の差が視差である。
3D空間内の2Dオブジェクト
ここでの魔法は、これらのカードが実際にはどれも奥行きを持っていないということです。側面から見ると、それらは消えてしまいます。重要なのは、3Dモーションには常に3Dオブジェクトが必要ではないということです。
このパララックスモーションの概念は、プロジェクトに少し奥行きを持たせることができます。異なる要素をわずかに異なる速度で移動させることで、本格的な3Dの外観を演出できるのです。
