ありがとう
アイデア、私はこのポストを更新しました.
フロントエンド開発者として、私はCSSでたくさん働いています.
時々、私は楽しみのためにCSSで実験しています.
最近、私は記事を見つけました3D transforms CSSでは、新しい実験のアイデアをくれました.
要するに、私は対話を構築するアイデアを完成しました3D object .
レンダリングプロセスの背後にあるアイデアは簡単です.

レイアウト

平面

オブジェクトの高さと幅を定義するオブジェクト(平面として参照)があります.デフォルトでは飛行機は見えない.

<div class="plane"></div>

.plane {
  transform-style: preserve-3d;
  animation: rotate 6s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

唯一の回転するオブジェクトは飛行機です.他のすべてのパーツは、ちょうど飛行機に続いています.

フェイス

次に、私は他のオブジェクト(私はそれらを面として参照)を作成しています.各顔は、それぞれの角度で特派の場所に配置されます.

<div class="plane">
  <div class="face"></div>
  <div class="face"></div>
  <div class="face"></div>
  <div class="face"></div>
  <div class="face"></div>
  <div class="face"></div>
</div>

.face {
  background: #ffffff11;
  border: 1px solid #ffffff22;
  box-shadow: inset 0 0 8px 8px #ffffff22;
  position: absolute;
  overflow: hidden;
}

コード

オブジェクトは、幅、高さ、深さの3つのプロパティによって記述されたスペースに囲まれます.
説明されたスペースの中で、私は1からnの部品(私はバーとしてそれらを参照)に置くことができます.各々のバーは、6つの顔から成ります.バーは、平面に沿って上から下に置かれます.
各々の顔は、オブジェクトを形成するためにきちんと構成されなければなりません.
構成は、幅、高さ、回転、および翻訳などの設定が含まれます.

定数

私は、それらの量と同様に顔の順序を後で使用する定数と定義しました

const faceFront = 0;
const faceBack = 1;
const faceRight = 2;
const faceLeft = 3;
const faceTop = 4;
const faceBottom = 5;

const faces = 6;

計算サイズ

正しく私はこの単純なヘルパー機能を使用している顔のサイズを計算する.

/**
 * @param {number} order
 * @param {number} faceSteps
 * @param {number} width
 * @param {number} height
 * @param {number} depth
 * @return {[number, number]}
 */
function calcSize(order, faceSteps, width, height, depth) {
  switch (order) {
    case faceFront:
    case faceBack:
      return [width, height / faceSteps];
    case faceRight:
    case faceLeft:
      return [depth * 2, height / faceSteps];
    case faceTop:
    case faceBottom:
      return [width, depth * 2];
  }
}

この関数は、幅と高さを数字の配列として返します.

変換の計算

この関数は与えられたパラメータから変換規則を生成します.

/**
 * @param {number} order
 * @param {number} nHeight
 * @param {number} nSizeY
 * @param {number} planeDepth
 * @param {number} planeWidth
 * @param {number} sizeX
 * @param {number} faceHeight
 * @return {string}
 */
function transform(
  order,
  nHeight,
  nSizeY,
  planeDepth,
  planeWidth,
  sizeX,
  faceHeight
) {
  switch (order) {
    case faceFront:
      return `translate3d(0, ${nHeight}px, ${planeDepth}px)`;
    case faceBack:
      return `rotateY(180deg) translate3d(0, ${nHeight}px, ${planeDepth}px)`;
    case faceRight:
      return `rotateY(90deg) translate3d(0, ${nHeight}px, ${sizeX / -2}px)`;
    case faceLeft:
      return `rotateY(-90deg) translate3d(0, ${nHeight}px, ${sizeX / 2 -
        planeWidth}px)`;
    case faceTop:
      return `rotateX(90deg) translate3d(0, 0, ${nSizeY - nHeight}px)`;
    case faceBottom:
      return `rotateX(-90deg) translate3d(0, 0, ${nHeight +
        faceHeight -
        nSizeY}px)`;
  }
}

これらのルールは、それぞれの位置に顔を配置し、必要な角度にそれらを回して使用されます.

顔の設定

設定関数は、プレーンだけでなく、変換に計算されたサイズを適用します.

/**
 * @param {HTMLDivElement} face
 * @param {number} faceNumber
 * @param {number} faceHeight
 * @param {number} faceStep
 * @param {number} planeWidth
 * @param {number} planeHeight
 * @param {number} planeDepth
 */
function configure(
  face,
  faceNumber,
  faceHeight,
  faceStep,
  planeWidth,
  planeHeight,
  planeDepth
) {
  const order = faceNumber % faces;
  const nHeight = ((faceNumber - order) / 3) * faceHeight;
  const [sizeX, sizeY] = calcSize(
    order,
    faceStep,
    planeWidth,
    planeHeight,
    planeDepth
  );
  const nSizeY = sizeY / 2;

  face.className = "face";
  face.style.width = `${sizeX}px`;
  face.style.height = `${sizeY}px`;
  face.style.transform = transform(
    order,
    nHeight,
    nSizeY,
    planeDepth,
    planeWidth,
    sizeX,
    faceHeight
  );
}

後で、構成された顔は、バーをつくるためにそれぞれの飛行機に付けられるでしょう.

オブジェクトのビルド

ビルド関数でラップしましょう.

/**
 * @param {HTMLDivElement} container
 * @param {number} bars
 * @param {number} width
 * @param {number} height
 * @param {number} depth
 */
function build(container, bars, width, height, depth) {
  if (!container) {
    return;
  }

  container.style.width = `${width}px`;
  container.style.height = `${height}px`;

  const planeWidth = width / 2;
  const planeHeight = height / 2;
  const planeDepth = depth / 2;
  const faceStep = bars * 2 - 1;
  const faceHeight = planeHeight / faceStep;

  const plane = document.createElement("div");

  plane.className = "plane";
  plane.style.width = `${planeWidth}px`;
  plane.style.height = `${planeHeight}px`;

  for (var i = 0; i < bars * faces; i++) {
    const face = document.createElement("div");

    configure(
      face,
      i,
      faceHeight,
      faceStep,
      planeWidth,
      planeHeight,
      planeDepth
    );

    plane.appendChild(face);
  }

  container.appendChild(plane);
}

ビルド関数は、オブジェクトの初期設定を受け入れます:親コンテナ、バーの数、幅、高さ、およびオブジェクトの深さ.
この関数は、プレーンを作成し、その後、フェイスを構築し、プレーンに追加します.
すべての面が構築された後、飛行機は提供されるコンテナに追加されます.
作業デモのソースコードはこちらneon 3D bars demo (更新).

視点の追加

私の例に従って、3 Dオブジェクトはコンテナに置かれます.
加えるperspective , 以下のように各CSSルールをコンテナに適用します.

container.style.perspective = "500px";

後に、飛行機は、このコンテナに追加され、視点の効果は、オブジェクトの外観をさらに似顔絵になります!

const root = document.getElementById("root");
const container = document.createElement("div");
container.className = "container";
container.style.perspective = "500px";
build(container, 3, 500, 500, 250);
root.appendChild(container);

最初の例では、CSSルールが平面に適用されたが、いくつかの実験の後、コンテナに適用することにした.
だから、実験を恐れてはいけないし、どこか他の、おそらくいくつかの場所でこのルールを適用する!

詳細

何らかの理由で、ブラウザがまだ実験的なCSS機能をサポートしていない場合transform-style 3 D効果はありませんが、投影はまだ見えます.
静的部品はCSS定義に存在する.そして動的パラメータは各パラメータ更新で計算される.

結論

この新機能では、簡単な3 DオブジェクトでWebページを豊かにすることが可能です.
私はそれが適用できる方法についてのカップルのアイデアを持っている!
それはあなたのWebアプリケーションへのプリローダーです.
いくつかのデータを可視化することができます.
また、いくつかのファンシー3 Dスピナー/ウェイター/負荷インジケータを実装することが可能です!