2.5D技術

次の次元、つまり半次元に足を踏み入れ、Webflow Designer を使用して 3D 環境で 2D イラストを積み重ねる技術を習得します。プロジェクト内の要素に次元を導入することで、変更を加えて 2.5D の印象を与えます。

このチュートリアルを通じて、以下のことを理解できるようになります。

1. セクションをカメラに変換する方法
2. 物体を立体的にする技術
3. オブジェクトに次元を導入する方法

セクションをカメラに変換する

変革しましょう セクション カメラに取り込んで、その中の任意の子要素で 2.5D の結果を観察できるようにします。 

1. お選びください セクション
2. アクセス スタイルパネル > 効果
3. 押し続ける 2D および 3D 変換 開示ドットを公開する 変換設定
4. 組み込む 子どもの視点 指定することで 距離 （例：1000ピクセル）

物体を立体的に見せる方法

今、私たちの セクション 内部のあらゆる要素のカメラとして機能し、要素に3次元効果を高めることができます セクション: 

1. 要素を選択してください セクション （例：「カード」 divブロック)
2. アクセス スタイルパネル > 効果
3. をタップします 2D および 3D 変換 アクセスするための追加アイコン 変換設定
4. 選択する 回転 スタイルとして、要素をY軸上で回転します（例：29度） 

オブジェクトに次元を導入するテクニック

「カード」の子オブジェクトに奥行きを与えることで、オブジェクトに2.5D効果を与えましょう。 divブロック:

1. 「カード」内の要素を選択します divブロック （例：「プロフィール」 divブロック) 
2. アクセス スタイルパネル > 効果
3. をタップします 2D および 3D 変換 アクセスするための追加アイコン 変換設定
4. 選択する 動く スタイルとして「プロファイル」を調整します divブロック Z軸に沿って（例：38ピクセル） 
5. 「カード」を再度選択 divブロック
6. アクセス スタイルパネル > 効果
7. ヒット 2D および 3D 変換 以前実装されていた回転スタイル
8. 回転 最近作成した2.5Dの奥行き効果を表現するために、X軸とY軸に沿って要素を移動します。

これで、次の次元に踏み込むことができました。

弊社のクレジットカードのデモとスクロール可能な山の機能を使用して、より魅力的なインタラクションを考案してください。または、学習のレベルを高めて、弊社の包括的なインタラクションとアニメーションのコースに参加してください。