次の次元、つまり半次元に足を踏み入れ、Webflow Designer を使用して 3D 環境で 2D イラストを積み重ねる技術を習得します。プロジェクト内の要素に次元を導入することで、変更を加えて 2.5D の印象を与えます。
![64b948756f0e82359e61e6ed_60ef4e3faf4e78b1b982acb9_kd6jwazmz10zohulf_dfmnudos28-0juyjesmunrxywdltqxdo7pvuuwli_yeu9es2-imrtegnn-qhothmin5vl2cifg5lzwreqm-5fr_dbyqa7jmfullpxwwr-ipvp1xrzz0moy カードとプロフィール写真に立体感が生まれ、2.5D 空間に浮かんでいるように見えます。](https://webflow-s3.tenten.co/2024/04/64b948756f0e82359e61e6ed_60ef4e3faf4e78b1b982acb9_kd6jwazmz10zohulf_dfmnudos28-0juyjesmunrxywdltqxdo7pvuuwli_yeu9es2-imrtegnn-qhothmin5vl2cifg5lzwreqm-5fr_dbyqa7jmfullpxwwr-ipvp1xrzz0moy.png)
このチュートリアルを通じて、以下のことを理解できるようになります。
- セクションをカメラに変換する方法
- 物体を立体的にする技術
- オブジェクトに次元を導入する方法
セクションをカメラに変換する
変革しましょう セクション カメラに取り込んで、その中の任意の子要素で 2.5D の結果を観察できるようにします。
- お選びください セクション
- アクセス スタイルパネル > 効果
- 押し続ける 2D および 3D 変換 開示ドットを公開する 変換設定
- 組み込む 子どもの視点 指定することで 距離 (例:1000ピクセル)
![64b948756f0e82359e61e6f5_60ef4e3f645bb410a0910614_ugxjdn72qtihfxltuxybrlnrg6hf1u8buzgpdizetmyyclxqxxphap7vmmfc7cqg-rfrsld-ur39ab5r260yrnxmbup9mmzznfpvouapkojxu28_bkeejshrgullgf2zz2nldtoo Webflow ナビゲーターでセクションが選択されます。](https://webflow-s3.tenten.co/2024/04/64b948756f0e82359e61e6f5_60ef4e3f645bb410a0910614_ugxjdn72qtihfxltuxybrlnrg6hf1u8buzgpdizetmyyclxqxxphap7vmmfc7cqg-rfrsld-ur39ab5r260yrnxmbup9mmzznfpvouapkojxu28_bkeejshrgullgf2zz2nldtoo.png)
![64b948756f0e82359e61e6fd_60ef4e40be8812aae5066edb_twv7fh9owz8smhmn1rjlriqtkg45abhzrvgmy_di2elcerm0wpupwixk8ri_jvgw8ajpyljflbsomovcnyj5s8qvcv-kxvt4znchsq5evnycmucj4oehnckstlo5-jvsdefw9uro セクションの子の視点は、距離が 1000 ピクセルになるように調整されます。](https://webflow-s3.tenten.co/2024/04/64b948756f0e82359e61e6fd_60ef4e40be8812aae5066edb_twv7fh9owz8smhmn1rjlriqtkg45abhzrvgmy_di2elcerm0wpupwixk8ri_jvgw8ajpyljflbsomovcnyj5s8qvcv-kxvt4znchsq5evnycmucj4oehnckstlo5-jvsdefw9uro.png)
物体を立体的に見せる方法
今、私たちの セクション 内部のあらゆる要素のカメラとして機能し、要素に3次元効果を高めることができます セクション:
- 要素を選択してください セクション (例:「カード」 divブロック)
- アクセス スタイルパネル > 効果
- をタップします 2D および 3D 変換 アクセスするための追加アイコン 変換設定
- 選択する 回転 スタイルとして、要素をY軸上で回転します(例:29度)
![64b948756f0e82359e61e6f2_60ef4e3f2541717b751fc180_0zdqpco70dtuik-lizl53-zitlg3fgl9zfrwnk0xm__x53u_ezyj7giywfcyvykkjxwuxqlrfpbqidwnjwxcl7t-kaxniq_yp_7lbgjedm8zvf1feyowbxq-auatsp9r3yhyig-4 Webflow ナビゲータで「カード」Div ブロックが選択されています。](https://webflow.tenten.co/wp-content/uploads/2024/04/64b948756f0e82359e61e6f2_60ef4e3f2541717b751fc180_0zdqpco70dtuik-lizl53-zitlg3fgl9zfrwnk0xm__x53u_ezyj7giywfcyvykkjxwuxqlrfpbqidwnjwxcl7t-kaxniq_yp_7lbgjedm8zvf1feyowbxq-auatsp9r3yhyig-4.png)
![64b948756f0e82359e61e6fa_60ef4e40b39a8f095d681af0_9o1q7dveyldhhjmhyuy4lg3cj6o_mycevusgt4wanqtsu_xfhsjdxg8ju7rzz6c5kc5wpg1lf3mikd1au_uoq9erf0y9sewuh-gkk5-kzn7zfd5wz7b0fuxbswislv65nzilfmet Div ブロックの Y 軸に 29 度の回転が設定されています。](https://webflow-s3.tenten.co/2024/04/64b948756f0e82359e61e6fa_60ef4e40b39a8f095d681af0_9o1q7dveyldhhjmhyuy4lg3cj6o_mycevusgt4wanqtsu_xfhsjdxg8ju7rzz6c5kc5wpg1lf3mikd1au_uoq9erf0y9sewuh-gkk5-kzn7zfd5wz7b0fuxbswislv65nzilfmet.png)
オブジェクトに次元を導入するテクニック
「カード」の子オブジェクトに奥行きを与えることで、オブジェクトに2.5D効果を与えましょう。 divブロック:
- 「カード」内の要素を選択します divブロック (例:「プロフィール」 divブロック)
- アクセス スタイルパネル > 効果
- をタップします 2D および 3D 変換 アクセスするための追加アイコン 変換設定
- 選択する 動く スタイルとして「プロファイル」を調整します divブロック Z軸に沿って(例:38ピクセル)
- 「カード」を再度選択 divブロック
- アクセス スタイルパネル > 効果
- ヒット 2D および 3D 変換 以前実装されていた回転スタイル
- 回転 最近作成した2.5Dの奥行き効果を表現するために、X軸とY軸に沿って要素を移動します。
![64b948756f0e82359e61e700_60ef4e4057f5a460a5f65ec8_w7bqj4wtueelrseimmuxiuxjrkydadqx_sn6sex_pt8n5e2nu0celdnst8cm8rf4a_evqfi6yqlve2eee2mrofprt2tgpa6np2vljmn8ezxyvurh3q2woji4vn2hy4eggj9jkutb Webflow ナビゲータで、「カード」Div ブロック内の「プロファイル」Div ブロックが選択されます。](https://webflow-s3.tenten.co/2024/04/64b948756f0e82359e61e700_60ef4e4057f5a460a5f65ec8_w7bqj4wtueelrseimmuxiuxjrkydadqx_sn6sex_pt8n5e2nu0celdnst8cm8rf4a_evqfi6yqlve2eee2mrofprt2tgpa6np2vljmn8ezxyvurh3q2woji4vn2hy4eggj9jkutb.png)
![64b948756f0e82359e61e703_60ef4e40a9f795bdf1007e05_d6aauaifabowrrfmlr0qncx5xkpbxm6c9iliy5ckycbwtbbgktcz1fp-eq7xeg0rwafkqvmjqvduwo84oohdb-nveblolbkez0flhdsubhq3z3coliuwigl2n7ypixvyjghnz69 「プロファイル」Div ブロックの Z 軸に 38 ピクセルの移動が設定されています。](https://webflow-s3.tenten.co/2024/04/64b948756f0e82359e61e703_60ef4e40a9f795bdf1007e05_d6aauaifabowrrfmlr0qncx5xkpbxm6c9iliy5ckycbwtbbgktcz1fp-eq7xeg0rwafkqvmjqvduwo84oohdb-nveblolbkez0flhdsubhq3z3coliuwigl2n7ypixvyjghnz69.png)
これで、次の次元に踏み込むことができました。
![64b948756f0e82359e61e6ed_60ef4e3faf4e78b1b982acb9_kd6jwazmz10zohulf_dfmnudos28-0juyjesmunrxywdltqxdo7pvuuwli_yeu9es2-imrtegnn-qhothmin5vl2cifg5lzwreqm-5fr_dbyqa7jmfullpxwwr-ipvp1xrzz0moy カードとプロフィール写真に立体感が生まれ、2.5D 空間に浮かんでいるように見えます。](https://webflow-s3.tenten.co/2024/04/64b948756f0e82359e61e6ed_60ef4e3faf4e78b1b982acb9_kd6jwazmz10zohulf_dfmnudos28-0juyjesmunrxywdltqxdo7pvuuwli_yeu9es2-imrtegnn-qhothmin5vl2cifg5lzwreqm-5fr_dbyqa7jmfullpxwwr-ipvp1xrzz0moy.png)
弊社のクレジットカードのデモとスクロール可能な山の機能を使用して、より魅力的なインタラクションを考案してください。または、学習のレベルを高めて、弊社の包括的なインタラクションとアニメーションのコースに参加してください。
Ewan Mak による最新の投稿 (すべてを見る)
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日