CSS3アニメーション 3Dアニメーション_html/css_WEB-ITnose-htmlチュートリアル-php.cn

すべてが 3D に関連するとすぐに、複雑さの指数は急上昇します。でもそれが普通で、結局のところ、余分な次元があり、そこには三次元にふさわしい品格がなければなりません。

3D Transform を記述する方法?フロップ効果を書けますか?本をめくる効果を書いてもらえますか?立体的な本の効果を書いてもらえますか？クリックしてください。答えはすべてここにあります。

多くの場合、単に要素を 2 次元レベルで変換するだけでは明らかに人間の終着点は 12 次元空間ではない可能性があります (ビデオ: 1 次元空間から 12 次元空間へ)。。

『Intro to 3D Transforms』の著者である David DeSandro 氏は、今は 21 世紀であるが、私たちは 30 年前の 2 次元空間インターフェイスにまだ苦労していると述べました。幸いなことに、2011 年には CSS3 が登場し、3D Transforms も登場しました。これは、話す価値のある大きなイベントでした。

2D 3D 変換

2D 変換と比較して、3D 変換には座標系に Z 軸が追加されています。つまり、オブジェクトは上下左右に加えて、前後に移動することもできます。 2D の回転メソッドは 3D の回転 Z と同等です。

それでは、変換のパラメータを Z 次元の外に拡張するだけで 3D 効果を実現できるでしょうか? CSS3を見て笑ってしまいました。

遠近法の概念を理解する

遠近法とは何ですか?辞書では、視点、視点、視点と訳されています。これは非常に抽象的な概念であり、少しの空間的想像力が必要です。

この概念は脇に置いて、先ほど述べた知識ポイントを使用してカードフロップ (妦) 効果を試してみましょう。賢い人であれば、数分でコーディングできるでしょう。

でも、ブラウザを見ると、なぜ 2D 効果を作成するために 3D コードを使用したのですか?

この時点で、私たちの視点の紳士を招待します。

スケッチを学んだことのある人は、遠近法の概念は、スケッチが真実で合理的であることを保証するための基礎であることをよく知っているはずです。

ビデオ: 一点透視図法の遠近法

CSS3 における遠近法は、このようなシステムにおける要素と閲覧者の間の距離を比喩的に表すと、要素の 3D 効果の強さを表します。 CSS3 の 3D 効果の消失点は固定されており、変化するのは閲覧者と要素の間の距離です。ただし、遠近感の値は 3D 効果の強度に反比例し、値が大きくなるほど、要素の 3D 効果が目立たなくなります。2000 ピクセルの視点は遠くにあるオブジェクトを見ていることを意味し、100 ピクセルは遠くにあるオブジェクトを見ていることを意味します。物体が目の前にあるということ。

ここに、3D 効果の強度の概念をイメージするのに役立つ画像があります -

(画像出典: Wikipedia)

それでも理解できない場合は、別の方法があります。ブラウザでのパースペクティブ値 3D 効果を観察しながら。

(画像出典: CSS 3D 変換の概要 - パースペクティブ)

左と右の図の要素はどちらも Y 軸を中心に 45 度回転していますが、違いは右の図の方が明らかです。人々に写真を思い出させるために、チャイナ・コレクティブによって開かれた窓。左側の図の問題点は、各要素の消失点が互いに独立しており、すべて要素の中心点にあるのに対し、右側の図の消失点は立体の中心に統一されていることです。箱。これは、要素の永続的な設定を要素の親コンテナに転送することによって実現されます。

そういえば、このシンプルな 3D は、最初の号で紹介した D Rose タッチスクリーンのケースのように、多くの非立体的なタッチスクリーンページには実際には十分です。

目の肥えた人は、このように立方体を描くことができると言うでしょう。 CSS3を見てまた笑ってしまいました。

三次元空間システムを確立する

現実は常に残酷である

遠近法的な属性を持つ私たちは、せいぜい紙にスケッチを描くことができる程度の集団であるモデルを自分の手で作りたい場合は、私たちはまだ若すぎます。先ほどのカードの反転効果を考えてみましょう。カードの親コンテナを裏返すと、現在のシステムはスケッチがどれほど現実的であっても、カードは表面にしか見えません。裏返すと、実物の裏側は見えませんよね？フラット 3D を超越する鍵は、transform-style:preserve-3d の属性設定にあります。デフォルト値は flat、つまり「スケッチ作業」です。この属性の設定は、どの空間システムルールに従う必要があるかを子要素に伝えるように設計されています。この属性は継承できないため、空間システムルールを設定する必要がある子要素がある限り、この属性は親要素で宣言する必要があります。

ブラウザが空間システムのルールを処理してくれるので、階層の問題を心配する必要がなく、どの要素がどこに行くのか、どの要素が消えるのかを心配する必要もありません。要素は表示される場所に移動します。まあ、エディターは、これを自分でやったことがない、というところから始まります。

カードをめくることから本をめくるまで

カードをめくるのは皇帝のすることであり、私たち文化人は本をめくる必要があります。先ほどめくったカードは正方形の中心を軸に変形していましたが、変形の原点を変えると本のページめくりになります。

閉じた本は通常、Y 軸の右側にあります。つまり、本は複数のページめくり効果で構成されます。要素側。これにより、カードのフロップに基づいてパラパラ漫画のデモを簡単に作成できます (クリックするとパラパラ漫画のデモが表示されます)。

影を使用すると、本のめくり効果をよりリアルにすることができます

(クリックしてデモを表示します)

3D アニメーションのハードレベル: 3 次元の本

3 次元の本はポップアップブックと呼ばれます海外では「びっくり！」感満載です。従来の平らな本を超えたこの読書モデルは、児童書でよく使用されます。

(画像出典: A Guided Tour of THE MEL BIRNKRANT COLLECTION)

CSS3 を使用してこの効果を実現するのは、少し刺激的です。

まず、三次元の本のルールを確立します:

本が開かれると、要素が上昇します

要素の勃起速度は、本のページが開く速度以下です

の端要素を折りたたんだ後に本が露出することはありません

要素の重なり関係が不自然であってはなりません

あとは自然に配置されます。これは各ページに 3D システムを確立し、3 次元要素を変換することに他なりません回転 X (90 度) から回転 X (0 度) まで。

(Mozzilla の小さなデモ)

編集者はかつて、ポップアップブックの左右のページの相互関係の特性により、カードをめくる方法を使用してクレイジーなポップアップブックのタッチスクリーンページを作成しました。はここでの使用には適していません。ここでは、別のより面倒な方法が使用されています。カードフロップ方式での表と裏のページの綴じとは異なり、ここでは本の左ページと右ページは 3D システムに属しており、階層関係は次のとおりです。 3D システムでは Z インデックスが放棄されているため、translateZ 値の変換を通じて制御されます。

クリックして入力: Maimang プロモーションページ

端末サポート

これまでのところ、CSS3 の 3D 機能はまだ腕の見せ所の段階にあり、Android と iOS のサポート効果は異なり、調整するのが困難です。上記の事例より肉眼で見える窪みが確認できるため、単純な3D変換はともかく、大規模なプロジェクトで広い領域に3Dディープ機能を使用することはお勧めできません。

3D とハードウェアアクセラレーション

コミュニティで広まっている伝説があります。3D 属性が使用されると、デバイスのハードウェアアクセラレーションがトリガーされ、それによってブラウザのパフォーマンスが向上します。しかし、この文は状況にも依存します -

ヴィンディーゼル (ワイルドスピードの主人公) がドミニクの象徴的な車であるダッジチャージャーを運転するように、GPU アクセラレーションによるアニメーションを使用することを想像してください。カスタムの 900 馬力エンジンは、一瞬で 0 ヤードから 60 ヤードまで加速できます。しかし、混雑した高速道路を運転する場合、それが何の役に立つでしょうか？この場合、選択した車両である Charger は正しいです。しかし問題は、あなたがまだ渋滞した高速道路にいるということです。 ——「CSS ハードウェアアクセラレーションの良い点と悪い点」

したがって、3D 効果の数を一定の範囲内で制御することが最優先です。 ——痛い教訓を学んだ編集者からのアドバイス