Animation CSS qui regarde de plus près et plus loin de gauche à droite, simulant le mouvement d'une façade vitrée sur un plateau tournant

Question

J'essaie de créer une animation CSS qui se déplace horizontalement de gauche à droite tout en apparaissant de plus en plus loin, simulant le mouvement du verre sur un plateau tournant vu de face.

Je me rapproche, mais cela ne semble toujours pas correct. Actuellement, on dirait qu'il se déplace le long d'une forme de losange au lieu d'un cercle.

C'est ce que j'ai essayé..

.roll {
  bloc de visualisation;
  largeur : 100 px ;
  hauteur : 100px ;
  fond : rouge ;
  marge : 10px auto 10px auto ;
  animation : lancer 2s cube-bézier(0,42, 0, 0,58, 1) infini ;
}

@keyframes roulent {
  0%,
  100 % {
    transformer : translateX(0%) échelle(1);
  }
  20% {
    transformer : translateX (50 %) échelle (0,8 );
  }
  50% {
    transformer : translateX (0 %) échelle (0,6 );
  }
  80% {
    transformation : translateX (-50 %) échelle (0,8 );
  }
}</pré>
<pre class="brush:html;toolbar:false;"><div class="roll"></div>

Answer 1

Si vous souhaitez animer un carré sur un cercle horizontal et le faire face au spectateur, vous pouvez utiliser une transformation 3D sur l'élément wrapper et l'inverser sur le carré pour qu'il reste face au spectateur.

Le but est de faire pivoter l'élément sur l'axe Y comme "dans la vraie vie".
Voici un exemple :

.wrap {
  width: 100px;
  height: 100px;  
  margin: 50px auto 50px auto;
  animation: roll 2s linear infinite;
  transform-origin: 50% 50% -250px;
  transform-style: preserve-3d;
}
.roll {
  width: inherit;
  height: inherit;
  background: red;
  animation: roll 2s linear infinite reverse;
  transform-origin: 50% 50% 0;
}

@keyframes roll {
  from { transform:  perspective(1200px) rotateY(0deg);}
  to { transform:  perspective(1200px) rotateY(-360deg);}
}

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

Veuillez noter que vous devez utiliser transform-style:preserve-3d; (Plus d'informations sur MDN)