コンテンツ
Web上で3Dアニメーションを作成するには、いくつかの方法があります。そのほとんどは、JavaScriptとWebGLの十分な知識、またはFlashなどのプラグインの使用を必要とします。 CSS 3D変換のおかげで、HTMLとCSSのみを使用して3Dを作成することができますが、そうするのは簡単ではありません。私の無料オンラインアプリであるTridivは、プロセスを簡素化し、ユーザーが1行のコードを記述せずに3Dオブジェクトを作成できるようにするシンプルで直感的なWYSIWYGインターフェイスを提供します。
このチュートリアルでは、HTMLとCSSのみを使用して、架空のレコードレーベルである「TridivRecords」のロゴを作成してアニメーション化します。ロゴのメインビジュアルは、Tridivを使用して3Dで作成されます。次に、通常のHTMLとCSSを使用して活版印刷要素を追加します。
ここで、最終的なアニメーションとそれを生成するコードを確認できます。
入門
Tridivを使用して3Dでターンテーブルを作成することから始めます。 tridiv.comにアクセスして、アプリを起動します。 Chrome、Safari、またはOpera 15（またはそれ以降）のいずれかを使用する必要があります。
始める前に、Tridivインターフェースを理解することが重要です。エディタのメインセクションは4つのビューで構成されています。左上には3Dビューがあり、シーンの完全なビューを提供します。他の3つのビューは、上、横、正面から見たものです。これらの3つのビューを使用して、3D形状を作成、編集、および移動できます。
水平ツールバーは2つの部分に分かれています。左側の部分にはドキュメントに関連する情報が表示されます。右側の部分には、形状を作成および編集するためのツールが含まれています。ザ・ 移動 選択と 編集 選択ボタンは、さまざまな編集モードを切り替えます。
プロパティペイン（サイドバー）には、ズームやグリッドへのスナップなどのドキュメント設定と、選択した図形のプロパティ（サイズ、位置、回転、色など）が表示されます。寸法と位置に使用される単位はemsです。回転角は度単位です。
チュートリアルの後半で混乱を避けるために、次の省略形を使用します。
w =幅h =高さd =深さ直径=直径xdeg = x軸の回転ydeg = y軸の回転zdeg = z軸の回転
ターンテーブルのベースを作成する
ズーム値を200に設定することから始めます。シェイプの描画を支援するには、でグリッドへのスナップ設定をアクティブにします。 ドキュメント設定 サイドバーのセクション。スナップ値をに設定します 0.125.
ターンテーブルのベースは単純な直方体で構成されているので、 直方体を追加 上部のツールバーのボタン。直方体がエディターの4つのビューすべてに表示されるはずです。
形状の名前を次のように変更します ベース プロパティペインの名前フィールドを使用する（下 形状プロパティ）。シェイプの名前は、エディターによって生成されるコードで使用されるため、有効なCSSクラス名である必要があります。これらのクラス名は後でロゴをアニメーション化するときに使用するため、作成するすべての新しいシェイプに適切に名前を付けるようにしてください。
直方体に名前を付けたら、上面図で選択されていることを確認し（青色で強調表示され、周囲にツールの円形リングが表示されているはずです）、[ 編集 リングの上部にあるボタンをクリックして、編集ハンドルを表示します。幅と深さが達するまで、直方体の側面にあるコントロールハンドルをドラッグします w = 10 そして d = 8 の中に 形状プロパティ.
側面図の内側の形状をクリックします。これにより、このビューに編集ハンドルが表示され、高さを変更できるようになります。に達するまで高さを調整します h = 2。プロパティペインに直接値を入力することもできます。直方体の角を丸めるには、プロパティペインの角の値を次のように変更します。 1.75、次にを押します [入る] 変更を適用するためのキー。このようなものがあります。
足を作成する
ターンテーブルの足にはシリンダーを使用します。円柱を追加し、その直径を次のように変更します。 直径= 1.75 とその高さ h = 0.5。クリックしてください 移動 上部のツールバーの選択ボタンをクリックして、図形のドラッグ可能な領域を表示します。シリンダーをベースの下に移動し、コーナーの1つに配置します。 （上面図、側面図、正面図で移動する必要がある場合があります。）
シリンダーを複製します（ 複製 ツールの円形リングのボタンを押すか、を押します D キー）そして新しいシリンダーをベースの別のコーナーに移動します。 4つの足すべてが正しく配置されるまで、このプロセスを繰り返します。シリンダーに名前を付けることを忘れないでください（たとえば、 足-左上, 足-右上, 足-左下, 足-左上）。これを行うと、結果は次のようになります。
次に、プラッター、ディスク、アーム軸、ボタンの作成について見ていきます。次のシェイプを作成するプロセスは、足のプロセスと似ています。さまざまなシリンダーに使用される寸法は次のとおりです。
大皿：直径= 7; h = 0,5ディスク：直径= 6.75; h = 0,25ボタン：直径= 1.5; h = 0,25 arm-axis-base：diam = 2.25; h = 0,25アーム軸：直径= 1.375; h = 1
円柱の側面を調整するには、プロパティペインの側面フィールドを使用して、各円柱の面の数を増やすことができます。あまり多くの側面を追加しないでください。これは、エディターと最終的なアニメーションのグローバルパフォーマンスに悪影響を与える可能性があります。この場合、プラッターとディスクに32面を超えて使用しないことをお勧めします。あなたはこのようなものを持っているはずです。
腕と頭
ターンテーブルの腕と頭には、直方体を使用します。腕の場合、直方体を作成します（w = 0.25; h = 0.25; d = 4）、次に回転を適用します -33° に y軸。頭の場合、直方体を作成します（w = 0.5; h = 0.5; d = 1）、次に回転を適用します -33° に y軸。両方の形状をアーム軸シリンダーに合わせます。結果は次のようになります。
色と質感
ターンテーブルはほぼ完成です。最後のステップは、色を割り当て、ビニール（レコードの表面を表す画像）にテクスチャを適用することです。色を割り当てるには、形状を選択して、 色 プロパティペインのフィールド。 Tridivでは、図形の面ごとに個別の色を指定できますが、この例では、allフィールドを使用して、すべての面の色を変更する必要があります。これを行うには、フィールドに16進カラーコードを入力し、を押して確認します。 入る.
この例で使用されている色は次のとおりです。
ベース：＃0099FFフィート、ボタン、軸、アーム、ヘッド：＃F2EEE5ディスク：＃fa7f7a
ビニールの質感については、プロセスは色の割り当てと同様です。ディスクシリンダーを選択し、をクリックします 画像 プロパティペインのフィールド。ビニールに適用する画像のURLを上部のフィールドに貼り付け、を押して確認します 入る。独自の画像を使用することも、この例で使用されている画像をダウンロードすることもできます。
これで、次のようなものができたはずです。
レンダリングとエクスポート
ターンテーブルが完成したので、エクスポートする前にレンダリングの方法に取り組みます。クリック プレビュー プロパティペインの上部にあるボタン。ズーム値をに設定します 200 ターンテーブルを大きく表示します。形状の黒い境界線を削除するには、に移動します。 ボーダーズ ペインのセクションで不透明度をに設定します 0。結果は次のようになります。
ターンテーブルを上から照らしてほしい。これを行うには、ターンテーブルの上部が手前を向くようにシーンを回転させます。ベースは完全に長方形に見えるはずです。プロパティペインのtridiv.com/d/4k6sectionで明るい値と暗い値を変更すると、シーン内の影が再生成されます。ライトの値をに変更します 0.
これでターンテーブルをエクスポートする準備が整いました。
ロゴの仕上げ
ロゴにテキストを追加して、ロゴアニメーションを作成する準備が整いました。クリック 編集 左下のCodePenボタン プレビュー コードをCodePenにエクスポートするためのビュー。 Tridivによって生成されたCSSコードはベンダープレフィックスを使用しないため、すべてのブラウザでコードを機能させるには、prefixr.comやleaverou.github.io/prefixfreeなどのツールを使用する必要があることに注意してください。 JavaScriptペインは使用しないので、閉じることから始めます。 HTMLペインで、に適用されているスタイルタグを削除します。 。シーン div。
CSSペインを展開し、最後に次のコードを追加します。
.scene {変換：translateY（-140px）rotateX（-55deg）; }
ここでは、 translateY（-140px）ターンテーブルを140px上に移動し、その下にテキスト用のスペースを残します。そうして 回転X（-55度） ターンテーブルの垂直傾斜を設定します。
テキストを追加するには、を追加する必要があります 。題名 開店直後のdiv #tridiv HTMLペインのdiv。内部に2つ追加します スパン> (.main-titleおよび.sub-title）、で区切られます hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
次に、正しいフォントとスタイルを適用する必要があります。 CSSペインで、ロゴで使用されているOpen Sansフォントをインポートし、テキスト要素の基本的なスタイルを追加します。
@import url（http://fonts.googleapis.com/css?family=Open+Sans:300）; / *テキストブロックの中央揃え+基本的なフォントスタイル * / title {position：absolute;上：50％;左：50％;マージン：0 0 0 -165px;幅：330px;高さ：5em; font-family：「OpenSans」、sans-serif;フォントの太さ：300;フォントサイズ：24px; text-align：center;文字間隔：1.5em;色：＃0099FF; } title hr {border：1px solid＃fa7f7a;マージン：.75em 0; }タイトルスパン{表示：ブロック; } .main-title {font-size：2.15em; } .sub-title {text-indent：.25em; }
Voilà！ロゴが完成しました。下の画像のようになります。 3Dモデルが完成したら、CSSの機能を使用して、スタイル、アニメーション、またはマウスイベントを追加することで、CSSをさらに改善できます。3Dモデルを他のHTML要素と同じように扱うだけです。
ロゴをアニメーション化する
こちらのロゴを使用したアニメーションをご覧ください。ターンテーブルの一部が「落ちる」と、それぞれが異なる遅延で同じキーフレームアニメーションを共有します。シェイプのtop属性はに設定されています 50%。落下効果を作成するために、からのトップ属性をアニメーション化します。 -400px に 50%:
@keyframes fall {0％{top：-400px; } / *シェイプを400pxの高さに配置するアニメーションを開始します * / 100％{top：50％; } / *次に、元の位置で終了します * /}
次のように、このアニメーションをすべてのシェイプに追加できます。
.shape {top：-400px;アニメーション：秋1秒は0秒前方に緩和します。 }
top属性をに設定します -400px 遅延を追加します：
.platter {animation-delay：1.05s; } .disc {animation-delay：1.35s; } .button {animation-delay：1.5s; }..。
を使用して最終的な「バウンス」効果を作成します rotateX 属性：
90％{変換：translateY（-5em）rotateX（780deg）rotateY（0deg）; } 95％{変換：translateY（-4em）rotateX（620deg）rotateY（0deg）; } 100％{変換：translateY（-4.5em）rotateX（660deg）rotateY（0deg）; }
この特定のバージョンを作成した方法ですが、覚えておいてください。制限はありません。
言葉： ジュリアン・ガルニエ
この記事はもともとネットマガジン第248号に掲載されました。
