CSSとJavaScriptで完全に構築された10の見事な3Dプロジェクト

公開: 2020-10-12

Webは、ダイヤルアップインターネットおよびGeoCitiesページから長い道のりを歩んできました。 Webサイトは完全にレスポンシブになり、タッチスクリーンデバイスからアクセスできるようになりました。しかし、最近のブラウザは、「主流」のWebデザインをさらに超えたものになっています。

フロントエンドテクノロジーのみを使用して、ブラウザですばらしい3D効果を作成することができます。そしてこの投稿では、私のお気に入りの3D Webプロジェクトを紹介します。これは、数十年の間にWebがどれだけ進んだかを示しています。

パースペクティブボックス

信じられないかもしれませんが、このボックスアニメーションは純粋なCSS3変換で作成されました。実際の立方体はCSSを使用してレンダリングするのが非常に簡単で、交互の色は異なるクラスで機能します。

アニメーションは、ループするキーフレームアニメーションを使用して、これらのボックスが3D空間で跳ねているような錯覚を与えます。右上隅にあるパースペクティブボタンのいずれかをクリックすると、この3Dモデルをさまざまな角度から表示することもできます。かなりクール！

純粋なCSS3グラフ

純粋なCSS3アニメーションのもう1つの例は、AnaTudorによって作成されたこの棒グラフです。これは、各長方形の4つの辺を表す4つの内部divを持つ単純なHTMLコンテナーを使用します。

バーはCSS3を使用してアニメーション化するのに十分簡単で、すべてさまざまな高さに成長します。しかし、最も印象的な部分は、棒グラフが成長している間でも、このアニメーション全体が表示角度をどのように回転させるかです。

これは、計算機能を使用してアニメーションを自動化するために多くのSassコードを使用するため、少し技術的です。しかし、3Dについてもっと学びたいのであれば、これは飛び込むためのしっかりしたペンです。

視野狭窄

トリッピーなWebkitブラウザーのエクスペリエンスについては、CSS3変換とSassプロパティの一部だけで作成されたこの3Dトンネルをご覧ください。

交互の色は、特定の期間の後にHSL色の値を交互にするSassforループを通過します。このループは、カラフルな紙吹雪のトンネルを無期限に通過しているような錯覚を引き起こします。かなりワイルド！

特別なことではないように思われるかもしれませんし、主要なWebサイトにとっては間違いなく実用的ではありません。しかし、それはあなたが創造性とコーディングの知識でどれだけできるかを証明しています。

CSSの3DiPhone

iPhone 4は根本的に新しいデザインを提供し、誰もがキラーな新しいスマートフォンに大騒ぎしました。開発者のJonathanLevaillantは、純粋なCSSでデザインを再作成して以来、iPhone4を本当に楽しんでいたに違いありません。

回転装置が進むにつれて、これはかなりクールです。それはiPhoneのように見え、外側のバンドはリアルなグラデーションで光を反射します。 iPhoneの画面は、Appleのサーバーでホストされているmp4ビデオを再生し、遠近法でも適切に歪んでいます。

これについて最も気が狂っているのは、すべてをCSSだけに依存していることです。純粋なCSS3iPhoneがブラウザで完全にインタラクティブになると、私はさらに10年後には興奮するでしょう。

3Dソーラーシステム

天の川は私たちの宇宙の小さな隅であり、ジュリアン・ガルニエによって作成されたこの素晴らしいペンで完全に表現されています。

多くのCSSを使用しますが、カスタマイズ可能な効果のほとんどはJavaScriptに依存しています。これにより、さまざまな惑星の速度、サイズ、距離を変更できます。

3Dビューとオーバーヘッド2Dビューを比較的簡単に切り替えることもできます。フロントエンド開発の優れた使用法について話してください！

影付きの立方体

これらの単純な影付きの立方体は、それほど多くないように見える場合があります。これらはCSSに組み込まれており、CSS3アニメーションを使用して1つの軸を中心に自動的に回転します。

ただし、マウスホバーで立方体をアニメーション化できるインタラクティブな設定があります。これは間違いなくクールなトリックであり、 :hoverや:checked疑似クラスやtilde(~) selectorなど、いくつかのまれなCSS手法に依存しています。

CSS3Dカルーセル

画像カルーセルは、グラフィック、写真、さらにはビデオを順番に表示するのに最適です。そして、このCSS3カルーセルを使用すると、これらの楽しいスライダーをまったく新しいレベルに引き上げることができます。

この非常に基本的な3Dカルーセルは、クリックイベントに依存して、さまざまな要素間でアニメーションを作成します。 3Dスタイルは驚くほど詳細で、純粋にCSSコードに依存しています。

ここで必要なJavaScriptは、[次へ] / [前へ]ボタンを切り替えて、3Dスタイルを所定の位置にアニメーション化することだけです。そして、これは実際に実際のサイトで使用できるものなので、最新のWebデザインで実用的に使用できる可能性があります。

ライオンを冷やす

これは少し実用的ではありませんが、それでも使用するのが信じられないほど楽しいものです。 Karim Maaloulによるこの3Dライオンレンダリングは、Three.jsを使用して、汗をかいたライオンに冷たい空気を吹き付けることができる楽しいゲームを作成します。

カーソルでファンをページ内で動かすと、ライオンの視線が続きます。次に、クリックして電動ファンを起動し、冷たい空気の流れを送りながらライオンの興奮を観察します。

開発者は、ひげの動きとともにライオンのたてがみに羽ばたき領域を作成することさえしました。

これは、3D効果がどこまで進んだかを示すもう1つの詳細な例です。

3DNESコントローラー

クラシックゲームは、現世代のコーダーにその痕跡を残しました。これは、純粋なCSS3でレンダリングされたJohan vanTongerenの3DNESコントローラーで確認できます。

Firefoxでも正常にレンダリングされるはずですが、Chrome / WebKitブラウザで最適に動作します。 CSSがどこまで進んだかを確認するのは実際には実験的なことなので、完璧であるとは期待しないでください。

ケプラーの軌道

ケプラーの軌道のこの現実的なモデルを構築するのにどれくらいの時間がかかったか想像できません。このモデルは、空間内の別の物体に対する物体の動きを示しています。この場合、開発者のDanieClawsonは素晴らしい仕事をしました。

このモデル全体では、ビジュアルにCSSを使用し、3D効果にThree.jsを使用しています。左上隅には、オブジェクトの速度、サイズ、および配置に影響を与えるために軌道変数の多くを変更できるオプションボックスがあります。

軌道を回るオブジェクトが、どちら側が太陽に向いているかに基づいて陰影を付けたリアルな光を使用していることに気付くかもしれません。これは非常に印象的であり、細部への多大な注意のためにこのリストの1位に属しています。

これらの例が、フロントエンド開発についてさらに学び、独自の3Dプロジェクトを作成するきっかけになることを願っています。