3DのCSS：箱の代わりにキューブで考えることを学ぶ

CSSへの私の旅は、あなたの典型的なフロントエンド開発者のストーリーではありませんでした。私はJavaプログラマーとしてスタートしました。私の最初のCSSは、Visual Studio内での色の選択に限定されています。

フロントエンドの開発とその後のCSSに対する私の情熱は、後に点火し、CSS3の増加と一致しました。 3Dとアニメーションの魅力は私を魅了し、レイアウトやカラー理論よりもCSSの理解をより深く形作りました。

3D CSS効果の作成にかなりの時間を費やしてきたので、ワークフローを改良しました。この記事では、現在のアプローチを共有し、3D CSSスキルを向上させるためのヒントとコツを提供しています。

立方体：あなたの基本的なビルディングブロック

ほとんどの3D作品では、立方体は主要な要素として機能します。より複雑な形状は達成可能ですが、細部へのより大きな注意を必要とします。特に、曲線は課題を提示しますが、それらに対処するための手法は存在します（後で説明します）。

ここでは基本的な立方体を作成することはカバーされていません。アナチューダーの優れた投稿またはこのスクリーンキャストのガイダンスを参照してください。基本的に、親要素は、その顔を表す6つの子供要素を含む立方体をカプセル化します。重要なことに、 transform-style: preserve-3d;理想的にはグローバルに適用する必要があります。

 * {transform-style：preserve-3d; }

複雑な3Dモデルの場合、シーン全体を立方体のアセンブリとして視覚化します。 3Dブックを考えてみましょう：4つの立方体 - 各カバーに1つ、背骨に1つ、ページ用に1つは、最後の仕上げを追加します。

シーンの構築：基盤の確立

立方体をレゴのレンガと考えてください。プロセスを簡素化するには、「平面」要素、つまり3Dモデルが残る基礎面を作成することが含まれます。これにより、回転と動きが簡素化されます。

私の好みのアプローチは、x軸とy軸に沿って平面を回転させてから、 rotateX(90deg)で平らにすることから始まります。その後、新しい立方体を追加するには、それらを平面要素内に配置し、 position: absolute 。

 。飛行機 {
  変換：rotatex（calc（var（ -  rotate-x、-24） * 1deg））rotatey（calc（var（ -  rotate-y、-24） * 1deg））rotatex（90deg）translate3d（0、0、0）;
}

ボイラープレートとパグを使用した開発を合理化します

多数の立方体を作成する繰り返しの性質は、合理化されたアプローチを必要とします。テンプレートエンジンであるパグを活用して、ミックスインを介して立方体構造を生成します。 （必要に応じて、簡単なパグの紹介を利用できます。）

パグを使用した典型的なシーン構造は、次のようになるかもしれません：

 Mixin Cuboid（className）
  .cuboid（class = classname）
    //立方体の各面の6つのdiv要素...

私の立方体クラスに対応するCSSは次のとおりです。

 .cuboid {
  // ...（CSS for Cuboid Styling）...
}

...（立方体の各顔のCSSルール）...

CSS変数のパワーを活用します

CSS変数（カスタムプロパティ）を広範囲に使用すると、効率が大幅に向上します。私の立方体は変数によって駆動されます：

• --width ：飛行機の立方体幅
• --height ：飛行機の立方体の高さ
• --depth ：立方体の深さ
• --x ：x平面上の位置
• --y ：Y飛行機の位置

vminは主に応答性のサイジングに使用されます。平面は平らに敷設されており、直感的な高さ、幅、深さの参照が可能になります。

dat.guiでのデバッグ：リアルタイムの制御と検査

便利なdat.guiライブラリは、リアルタイムのデバッグを容易にします。ランタイム中にCSS変数を変更することができ、回転、位置、および寸法を簡単に調整できます。 dat.guiを使用して平面を回転させると、空間関係の視覚化に役立ちます。

センタリングとポジショニング：精度と組織

各立方体は意図的に中央にあり、平面の半分と半分の下にあります。これにより、アニメーション、特にZ軸回転が簡素化されます。複雑なシーンの場合、サブプレーンは組織を強化し、セクションの独立した操作を可能にします。

美学：洗練と視覚的魅力

構造完了後、フォーカスは美学に移行します。色と色合いにCSS変数を一貫して使用すると、視覚的な調和が強化されます。背景画像と擬似要素は、詳細とテクスチャを追加します。 brightness()などのフィルターは、顔全体にシェーディングを微妙に調整できます。

深さの幻想：煙と鏡のテクニック

時々、「Faux」3D効果は、より少ない要素で説得力のある深さを作成します。戦略的に配置および回転したフラット要素は、3D形状を模倣できます。

不規則な形状への対処：創造的な問題解決

不規則な形状には、ケースバイケースのソリューションが必要です。ポリゴンは曲線を近似できますが、視点のトリックは深さの幻想を生み出すことができます。

Z戦闘：重複する要素の競合を解決します

重複する要素が点滅するZ戦闘は、競合を防ぐために慎重なDOM順序とわずかな位置オフセットによって対処されます。

結論：3D CSSの旅に乗り出します

3D CSSの課題を受け入れ、さまざまなテクニックを実験し、作成を共有します。忍耐と創造性は、このやりがいのある努力の重要な要素であることを忘れないでください。

以上が3DのCSS：箱の代わりにキューブで考えることを学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。