CSS 3D からソースコードによる空間座標軸へ

かつて、サイコロを振るゲームについて話しました。その時は、steps 属性 + スプライト画像を使用してフレームアニメーションを作成しました。もちろん、これはかなり良いのですが、実は、これは私が最初に考えていたものではありません。私は、実際の 3D とアニメーションを使用してそれを行いたかったのです。この計画には、多くの空間知識が必要です。今日は、この CSS 3D の遊び方を説明します。

まず、効果画像：

基本的な考え方: 3 層構造: パースペクティブ コンテナ >> キャリア >> 特定の 3D 画像。

パースペクティブ コンテナ: 3D レンダリング効果を決定します。ここでのパースペクティブ属性は、ピクセル単位でパラメータを受け取ります。パースペクティブ値が大きいほど、目は観察対象オブジェクトから遠くなり、値が小さいほど、目は観察対象オブジェクトに近くなります。

パースペクティブ属性がないと、視野角を調整できません。

キャリア: 3D画像をサポート

このベクターと通常の HTML タグの最大の違いは、transform-style:preserve-3d という追加属性があることです。 3D画像表示をサポートしていることを示します。

この属性がない場合、3D 変換された 3D グラフィックは 2D 平面に圧縮され、コンテンツが 3D であってもコンテナーがフラットであるため、3D 効果を表現することができません。

具体的な3D画像: 2Dから3Dへの変換

ここの 3D 画像はすべて 2D 平面画像から変換されていますが、どのように変換するのでしょうか? translateX、translateY、translateZ 属性を使用する必要があります (もちろん、省略形は translate-3d)。また、rotateX、rotateY、rotateZ なども使用します。移動と回転の具体的なルールは、以下の有名な参照画像、3 次元座標図に基づいています。

まず、translate のルールについて説明します。これは詳しく説明する必要はありません。参照するだけです。たとえば、この図の translateZ(-100px) は、画像を -z 軸方向に 100px 移動することを意味します。より鮮明な言い方をすると、「画面に 100px 沈む」となります。 translateX、translateY など。

難しいのは回転です。非常に簡単な判断基準をお伝えしましょう。正の軸が目に向いている場合、時計回りの回転角度は正、反時計回りの回転角度は負です。

とても簡単です。たとえば、3D サイコロを作りたい場合、まず、上の図に示すように、6 つの平面を 3 次元座標系の中心に配置します。それらのサイズはキャリアと同じです。それらをサイコロにするには、次の変換を行う必要があります。

（注：キャリアの長さと幅、6つの面はどちらも200ピクセルです）

3D 画像を参照してジェスチャーをするだけで、何が起こっているのかがわかります。

すべてのソースコードを添付します:

<テンプレート>
  <div class="box">
    <セクションクラス="キューブ">
      <div class="front">前面</div>
      <div class="back">戻る</div>
      <div class="left">左</div>
      <div class="right">右</div>
      <div class="top">上へ</div>
      <div class="bottom">下</div>
    </セクション>
  </div>
</テンプレート>
<style lang="less" スコープ>
。箱 {
  幅: 100%;
  高さ: 100%;
  パースペクティブ: 500px;
}
.キューブ{
  位置: 相対的;
  幅: 200ピクセル;
  高さ: 200px;
  マージン: 100px 自動;
  色: #ff92ff;
  フォントサイズ: 36px;
  フォントの太さ: 100;
  テキスト配置: 中央;
  行の高さ: 200px;
  変換スタイル: 3D を保持します。
  変換: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);
  // アニメーション: 8 秒間無限に線形移動します。
  @keyframes 移動 {
    0% {
      変換: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
      変換: 回転X(720度) 回転Y(360度) 回転Z(360度);
    }
  }
  div {
    位置: 絶対;
    幅: 100%;
    高さ: 100%;
    境界線: 10px 実線 #66daff;
    境界線の半径: 20px;
    背景色: rgba(51, 51, 51, 0.3);
  }
  。フロント {
    変換: translateZ(100px);
  }
  。戻る {
    変換: translateZ(-100px) rotateY(180deg);
  }
  。左 {
    変換: translateX(-100px) rotateY(-90deg);
  }
  。右 {
    変換: translateX(100px)rotateY(90deg);
  }
  .トップ{
    変換: translateY(-100px) rotateX(90deg);
  }
  。底 {
    変換: translateY(100px) rotateX(-90deg);
  }
}
</スタイル>

要約する

以上が、CSS 3D からソースコード付きの空間座標軸までご紹介した内容です。お役に立てれば幸いです。ご質問があれば、メッセージを残していただければ、すぐに返信させていただきます。