ターンテーブル上のガラスファサードの動きをシミュレートする、左から右に近づいたり遠ざかったりする CSS アニメーション

Question

正面から見たときのターンテーブル プレート上のガラスの動きをシミュレートし、近づいたり遠ざかったりしながら左から右に水平に移動する CSS アニメーションを作成しようとしています。

近づいてきましたが、まだ正しく見えません。現在、円ではなくひし形に沿って移動しているように見えます。

これは私が試したことです..

.roll {
  表示ブロック;
  幅: 100ピクセル;
  高さ: 100ピクセル;
  背景: 赤;
  マージン: 10px 自動 10px 自動;
  アニメーション: ロール 2 秒の cubic-bezier(0.42, 0, 0.58, 1) 無限;
}

@キーフレームロール {
  0%、
  100% {
    変換:translateX(0%)scale(1);
  }
  20% {
    変換: 変換X(50%) スケール(0.8);
  }
  50% {
    変換:translateX(0%)scale(0.6);
  }
  80% {
    変換: 変換X(-50%) スケール(0.8);
  }
}

<div class="roll"></div>

Answer 1

水平円上の正方形をアニメーション化して視聴者に向ける 場合は、ラッパー要素で 3D 変換を使用し、正方形上で反転して、視聴者向けのままにすることができます。

ポイントは、「現実」と同じように要素を Y 軸上で回転させることです。

以下に例を示します:

リーリー リーリー

transform-style:preserve-3d;

を使用する必要があることに注意してください (MDN の詳細情報 )