Discussion :

[Invité]

Bonne année à tous

Je déplace un objet, je lui fait faire une rotation puis je veux le remettre à son emplacement de départ.

Voici le keyframe que j'ai fait qui fonctionne bien avec Chrome :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
@keyframes deplacement {
  0%   { left: 50%; top: 30em; }
  10%  { transform: rotate(0deg) translate(20em,0em) rotate(0deg); }
  90%  { transform: rotate(360deg) translate(20em,0em) rotate(-360deg); }
  100% { transform: translate(0em,0em); }
}

C'est bien ce keyframe qui est aussi utilisé par Safari mais dans ce cas la rotation ne se fait pas ...

Voici un autre test qui fait bien la rotation avec Chrome et Safari. Mais dans ce cas, l'objet ne revient pas à l'endroit initial en ligne droite mais en faisant une sorte de rotation inversée ...

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
@keyframes deplacement {
  0%   { left: 50%; top: 30em; }
  10%  { transform: rotate(0deg) translate(20em,0em) rotate(0deg); }
  90%  { transform: rotate(360deg) translate(20em,0em) rotate(-360deg); }
  100% { left: 50%; top: 30em; }
}

Avez-vous une idée de la source de ces problèmes ?
Merci d'avance.