透視法と変換オプションを使用してDiviで3D写真の壁をデザインする方法
公開: 2019-05-043Dフォトウォールのデザインは、PhotoshopやSketchなどのフォトエディターを使用した場合にのみ可能であるように思われます。 しかし、そうではありません！ 最近では、CSSだけを使用してWeb上に構築できる一見不可能なデザインがたくさんあります。 そして、Diviのようなページビルダーを使えば、この種のデザインを作成するためにCSSについて多くを知る必要さえありません。 そのため、本日は、Diviで3Dフォトウォールをデザインする方法を紹介します。
秘訣は、パースペクティブcssプロパティを使用することです。 親要素にCSSを1行追加するだけで、Diviの組み込みの変換オプションを使用して、アイテムをリアルな3Dデザインに回転させることができます。
始めましょう！
スニークピーク
これが、今日デザインする3Dフォトウォールのスニークピークです。
3Dフォトウォールのデザイン例のレイアウトを無料でダウンロード
このチュートリアルの3D写真の壁のデザインを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
私たちのYoutubeチャンネルを購読する
入門
このチュートリアルを開始するために必要なのは、Diviテーマがインストールされてアクティブになっていることだけです。 使用するにはいくつかの画像が必要になるため、旅行代理店のレイアウトパックで使用しているのと同じ画像を自由に使用してください。 その後、新しいページを作成し、ページとタイトルを指定し、DiviBuilderをデプロイしてフロントエンドでビルドする必要があります。 次に、「最初からビルド」オプションを選択します。 それでおしまい。 あなたのデザインキャンバスが待っています！
パースペクティブが変換オプションでどのように機能するかを理解する
あなたが基本的なアートクラスを受講したことがあるなら、あなたはおそらく遠近法に精通しているでしょう。 これは、2Dの紙やキャンバスに存在していても、3Dのように見えるオブジェクトを描画するためにアーティストが使用する手法です。 Webデザインでは、transformプロパティを使用して要素を3D位置に配置できます。 Diviでは、これらの変換オプションはDiviビルダーに組み込まれています。 要素を3D位置に配置する主な変換プロパティは、変換回転です。これにより、アイテムをz、x、またはy軸に沿って回転させることができます。 ただし、transformrotateを使用してアイテムを回転すると、perspectiveプロパティが適用されない限り、要素は3Dとして表示されません。
たとえば、1つの列の行に画像が追加された単一の画像モジュールがあるとします。
次に、transformrotateプロパティを使用して画像をx軸に沿って回転させます。 画像は回転しますが、2Dのままなので、画像は上下から絞られて短くなっているように見えます。
ここで、CSSの小さなスニペットを使用して行のメイン要素（画像の親要素）に遠近法を追加すると、画像に遠近法が追加されます。 遠近法の値に応じて、画面を見ているユーザーからオブジェクトが表示される距離を増減できます。 行に「パースペクティブ：600px」を追加した場合の画像の例を次に示します。
画像の上部が小さく、画像の下部が大きく、遠近法の3D効果が作成されていることがわかります。 基本的に、画像はページを表示しているユーザーから900px離れて見えます。
このチュートリアルでは、これと同じ手法を使用して画像の行全体を回転させ、親セクションに遠近法を追加して3D写真の壁を作成します。
上部と下部の3Dフォトウォールの設計
この最初のデザインでは、見出しとして使用できる1つのテキストのようなものの上部と下部に3D写真の壁を追加します。 これがその方法です。
トップ3Dフォトウォールの作成
新しいページで作業を開始するには、4列の行を持つ通常のセクションを作成します。
1列目に、最初の画像を含む画像モジュールを追加します。 この例で使用している画像はすべて600x800ピクセルです。
画像を画像モジュールにアップロードしたら、次のようにパディングを更新します。
カスタムパディング：上3％、下3％、左3％、右3％
画像を複製（またはコピーして貼り付け）し、4つの列のそれぞれに追加して、このように4つの列のそれぞれに3つの画像を作成します。
これは、回転して遠近法を追加して3D壁デザインを作成する上壁（または天井）として機能します。
セクションをカスタマイズして、パースペクティブを追加し、オーバーフローを非表示にします
行モジュール（個々の画像ではない）を回転させるので、セクションである行の親にパースペクティブプロパティを追加する必要があります。 また、画像がセクションコンテナの外に出ないようにするには、垂直オーバーフローと水平オーバーフローの両方に非表示のオーバーフローを追加する必要があります。
これを行うには、セクション設定を開き、以下を更新します。
背景色：＃000000
カスタムパディング：0px上、0px下
パースペクティブプロパティを追加するには、次のカスタムCSSをメイン要素に追加します。
主な要素のCSS：
perspective: 400px;
次のようにオーバーフロープロパティを参照してください。
水平オーバーフロー：非表示
垂直オーバーフロー：非表示
行設定の更新：幅と側溝の幅
次に、行をカスタマイズして、回転した3Dデザイン用に準備します。 これを行うには、幅を縮小し、ガター幅を更新して画像間のマージンを取り除きます。
行設定を開き、以下を更新します。
側溝幅：1
幅：300px（デスクトップ、タブレット、電話）
行設定の更新：変換回転と原点
次に、transformrotateオプションを使用して行を次のように回転させます。
変換回転Y軸：-58度
変換原点を次のように変更します。
変換原点：中央下（または100％50％）
行設定の更新：カスタム列幅
タブレットと電話のディスプレイに4列のレイアウトを残したいので、これらのブレークポイントで列幅のcssをオーバーライドする必要があります。 これを行うには、各列にwidthcssプロパティを追加する必要があります。 [詳細設定]タブで、次のカスタムCSSスニペットを各列のメイン要素に次のように追加します。
（注：ガター幅が1に設定されていることを確認してください。設定されていない場合、これは機能しません）
列1の主な要素：
width: 25% !important;
列2の主な要素：
width: 25% !important;
列3の主な要素：
width: 25% !important;
列4の主な要素：
width: 25% !important;
それでおしまい。 最初の3Dフォトウォールが作成されました。
見出しセクションを作成する
デザインの見出しを作成するには、現在のセクションのすぐ下に1列の行を持つ新しい通常のセクションを作成する必要があります。
モジュールを追加する前に、セクションを黒の背景で更新します。
背景色：＃000000
次に、次のように、前に行ったのと同じパースペクティブプロパティをセクションのメイン要素に追加します。
次に、次のテキストモジュールを行に追加します。
内容：写真
テキストフォント：Titillium Web
テキストフォントスタイル：TT
テキストテキストの色：#ffffff
テキストテキストサイズ：5vw
テキスト文字の間隔：6px
テキスト行の高さ：1em
テキストの向き：中央
これで、テキストモジュールに変換回転を追加できます。 親（またはセクション）にパースペクティブを設定すると、テキストを回転すると3D効果が発生します。
次のように変換回転値を追加します。
変換回転X軸：-12度
変換回転Y軸：32度
これで、下部の3D写真の壁を作成する準備が整いました。
下部の3D写真の壁（または床）を作成する
下部の3D写真の壁を作成するには、上部の壁を含む上部のセクションをコピーして貼り付け、見出しセクションのすぐ下に貼り付けます。
次に、新しいセクションの行設定を次のように更新します。
変換回転Y軸：58度
変換の原点：トップセンター
最終設計
それでおしまい！ 最終的なデザインをチェックしてみましょう。
デザインはモバイルでもそのまま残ります（少しオーバーフローすることを除いて）。
左右の3Dフォトウォールの作成
この次のデザインでは、見出しの上部と下部ではなく、左側と右側に3D写真の壁を作成します。 設計プロセスを迅速に開始するために、最初の例では、事前に作成された設計のいくつかを使用します。
まず、下の画像の壁を含む最初のデザイン例の下のセクションを複製します。 次に、新しいセクションの行設定を開き、変換オプションをデフォルトの状態にリセットします。
次に、行を複製します。
次に、最初のデザイン例の見出しのあるテキストモジュールを含む行（セクションではない）をコピーします。 次に、画像を含む2つの行の間に貼り付けます。
これは最初のデザインと同様の設定ですが、すべての行が1つのセクション内にある点が異なります。 これは次のステップにとって重要です。
2つの画像の壁をページの左右に配置し、テキストを中央に配置します。 これを行う簡単な方法は、セクションでdisplayflexを使用することです。 これにより、セクション内で行が水平方向に整列します。
これを行うには、セクション設定を開き、次のカスタムCSSをメイン要素に追加します。
（ユーザーのパースペクティブの「Zスペース」距離を増やすために、パースペクティブ値を700pxに上げていることに注意してください。）
主な要素のCSS：
perspective: 700px; display:flex;
そして出来上がり！ 壁は所定の位置にあり、回転する準備ができています。
より高い壁の画像を追加する
3D写真の壁を少し高くするには、画像を含む各行の4つの列のそれぞれに別の画像を追加するだけです。 他の人と同じように、3％のパディングを引き継ぐようにしてください。
両側の列の幅を変更する
画像の壁を回転させる前に、まず幅を100％に調整する必要があります。 左側のイメージウォールの行設定を開き、以下を更新します。
幅：100％（デスクトップ、タブレット、電話）
最大幅：100％
次に、右側の行についても同じようにします。
3D効果のために側列を回転させる
これで、各行に変換ローテーションを追加する準備が整いました。 まず、左側の行の行設定を開き、以下を更新します。
変換回転X軸：90度
次に、右側の行の行設定を開き、以下を更新します。
変換回転X軸：-90度
セクションレベルでパースペクティブを配置すると、行はテキストモジュールの両側に3D写真の壁として表示されます。
最終結果
最終結果を確認してみましょう。
ケーキに少しアイシングをかけるために、3Dグラフィック要素を含む背景画像を追加できます。 これは、Cryptocurrency LayoutPackから取得した背景画像を使用したデザインの例です。
ボーナスホバー効果：これらの壁をスイングしてホバーで表示します！
変換回転ホバー効果を簡単に追加できます。これにより、ユーザーはホバー時に画像の壁をスイングして表示できます。 これを行うには、左側の行の設定を開き、以下を更新します。
変換原点：左中央
変換回転X軸（ホバー）：0度
次に、右側の行の設定で、以下を更新します。
変換の原点：右中央
変換回転X軸（ホバー）：0度
結果を確認してください。
ボーナスデザイン効果：画像を宇宙に飛ばす
画像の行は遠近法を使用して回転しているため、変換変換を使用して行内の画像を移動できます。 これのすごいところは、動きが3D平面に沿ってとどまるということです。 これを行うには、画像の設定を開き、変換変換オプションを使用して、画像をグリッドの外側の空間に移動します。
これは、いくつかの変換変換値を画像に追加することによってどのように見えるかの例です。
最終的な考え
Diviで3Dフォトウォールを作成すると、ページのデザインに印象的な影響を与えます。 そして、この記事のテクニックを使ってさまざまなデザインを試すのは本当に楽しいと言わなければなりません。 パースペクティブプロパティは、変換オプションと連携して機能し、3Dデザインのような無数のライフを作成します。 そして、これらの行（または壁）はDiviの任意のモジュールで埋めることができることを忘れないでください。 だから、いくつかの宣伝文句も試してみてください。 これがあなたに今日ユニークな何かを作るきっかけとなることを願っています。
コメントでお返事をお待ちしております。
乾杯！