導入

仕事のプロジェクトのために、私は若干の単純な3 D CSS技術を学ぶ必要がありました.それで、私は、これを達成する方法を学ぶために、XboxシリーズXとSモデルをCSSで構築する側プロジェクトとして決めました.

この小さなデモでは、両方のXboxシリーズモデルの間で選択することができます.非選択モデルを選択すると遷移が発生します.カーソルをモデルのどちら側に動かしてもビューを少し変更します.
ここでデモを見つけることができます.
https://codepen.io/tumain/full/poyqVeb
私はどのようにデモを作成し、その視覚的な側面のいくつかをカバーすることは興味深いと思いましたを含む

キューブクリエーション

モデル間遷移

モデルのパターン

Xboxロゴ作成

カーソル位置の3 D運動

キューブクリエーション

始めるために、私は立方体をつくる方法を見ました.使用するthis guide を構築する.私は、あなたがCSSキューブ作成で非家族性であるならば、記事を読むことを推薦します、しかし、要するに;私は.cube クラス.この.cube クラス内の6つの要素を、それぞれのキューブの顔を表す:トップ、右、下、左、背面、前面.翻訳と3 D変換を介して各キューブの顔の回転を変更すると、キューブを作成することができました.
次に、各Xboxの寸法を記録し、以下の画像からそれぞれの色をサンプリングした.

各モデルは移行時に変更されるCSS変数を共有するそこで、このデータを格納するためにCSS変数を作成しました.

:root {
    --height: 55vw;
    --width: 30.2vw;
    --depth: 12.6vw;
    --seriess: #E7E7E7;  // Series S background colour
    --seriesx: #1F1E25;  // Series X background colour
    --view: -222deg;     // View of the scene
}

私はガイドから使用される既存のCSSの幅と高さを更新し、これらのCSS変数を使用しました.私はそれから、私がビューに満足するまで、モデルの3 D変換を調整しました.

両モデル間の遷移

各々のモデルの色と寸法を積んで、私は2つのクラスをつくりました.一つ.series-s その他.series-x . このクラスはbody どのモデルが選択されているかを調べます.
パズルの次の部分は、モデルが選択されたに応じてCSS変数を更新することでした.私はJSstyle.setProperty メソッド.例えば、幅を変えたいなら--width ) スクリーン上のモデルの場合は以下のようにします.

document.documentElement.style.setProperty("--width", NEW_WIDTH_HERE + "vw");

私のJSでは、各モデルの寸法を保持するオブジェクトを格納します.シリーズSの例です.

let seriesS = {
  height: 55,
  width: 30.2,
  depth: 12.6
};

私はこれらのプロパティを渡すことができますし、モデルの寸法を更新する関数を作成しました.

let setProperties = (props) => {
  document.documentElement.style.setProperty("--width", props.width + "vw");
  document.documentElement.style.setProperty("--height", props.height + "vw");
  document.documentElement.style.setProperty("--depth", props.depth + "vw");
};

これをトリガーするには、ページの一番下にあるクリック可能なXとSの要素を作りました.私がSモデルを欲しかったら、私は単にsetProperties メソッドseriesS オブジェクトから現在のクラスを削除しますbody タグを追加したいクラスを追加;series-s .

let seriesSSelected = () => {
  setProperties(seriesS);
  document.body.classList.add("series-s");
  document.body.classList.remove("series-x");
};

色とサイズの間の遷移を取得した後、私は各モデルの視覚的な要素を追加しました.
Sモデルでは、クラスを使用して大きな黒い円形のベントがあります.circle . これは単に黒い円ですborder-radius: 50% ) 絶対にモデルの前面に配置.
Xモデルが選択されたときに縮小する遷移を達成するにはx-scale-0 クラス.このクラスは子供です.series-x 単に要素のスケールを0に設定します.それで、シリーズXが選ばれるとき、スケールダウンは起こります.

.series-x .x-scale-0 {
   transform: scale(0);
}

同様に.s-scale-0 他の方法で動作するクラスです.

モデルのパターン

SとXモデルの上部には円形の穴があります.S 'モデル正面にも円形の穴があります.このパターンを達成するために私は背景を使用した利用radial-gradient and background-size .
sの前輪には以下のように使用する.

background-size: .9vw .9vw;
background-image: radial-gradient(#000 50%, transparent 50%);

私は、シナリオに応じて円のサイズを増やす/減少するために背景サイズを微調整しました.

Xboxロゴ作成

Xboxのロゴは3つの円で構成されています.

完全に丸い円、背景に使用される

ネスト1幅と高さが適用され、異なる境界を持つ透明な形

2と同じですが、別の位置に配置

ポイント2と3のために、私は望ましい結果を得るために幅と高さを微調整しました.

カーソル位置の3 D運動

私は、ちょうどそれが3 Dであることを示すために、最後の分でこれを加えました.これはCSS変数--view , 我々が始めに言及したそのこと.
まず最初に、イベントリスナーを体に加え、トラッキングmousemove and mouseleave . mousemove CSSをわずかに変更する--view 変数はカーソル位置によって異なりますにmouseleave リセットする--view を初期変数に設定する.

// the scene's initial rotation value
let initialView = -222;

// move rotation on mouse movement
let onMouseMove = (e) => {
// calculate percentage of the cursor's x position
// e.pageX: cursor position
// window.innerWidth: screen width
  xPercent = parseInt((e.pageX / window.innerWidth) * 100) - 75;
// add the movement to the initial view
  var view = initialView;
  view += xPercent / 2;
// update the --view CSS variable
  document.documentElement.style.setProperty("--view", view + "deg");
};

うまくいけば、上記のコメントされたコードは意味をなします.値' 75 'は、それが左または右にカメラを移動するために健康的なオフセットのように感じたので使用されました.
マウスの終了イベントは、最初のビューにモデルをリセットするので、カーソルが画面をオフにすると、ビューがリセットされます.

let onMouseLeave = (e) => {
  document.documentElement.style.setProperty("--view", initialView + "deg");
};

次に、イベントリスナーを追加する必要があります.

let b = document.body;
b.addEventListener("mousemove", onMouseMove);
b.addEventListener("mouseleave", onMouseLeave);

結論

そして、あなたはそれを持ちます.うまくいけば、私が場面が開発された方法の深さに入ることはおもしろい読みでした.それはシーンの中で最も複雑ではないが、私はこれらの視覚効果のいくつかを作成する方法の詳細に入るのは便利であると考えた、これは3 D CSSを使用して初めてだった.
読書ありがとう.