web-dev-qa-db-fra.com

Comment faire la transition uniquement tourner la transformation?

J'utilise un tas d'éléments pour composer une image d'arrière-plan et ils se positionnent tous absolument autour, tournant librement.

Le problème est que je ne voudrais faire que la transition de la rotation de ces objets, pas les propriétés du haut ni de gauche. Et apparemment transition: transform 30s; n'est pas autorisé. J'ai eu la brillante idée de faire

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

Mais cela ne fonctionne pas non plus. Comment puis-je resoudre ceci?

cssrotationtransition
19
Digger

Transformer est un préfixe de fournisseur

Au lieu de

transition:all 30s ease-out;
transition: left 0s;
transition: top 0s;

faire

-webkit-transition: -webkit-transform $amount-of-time ease-out;
-moz-transition:    -moz-transform $amount-of-time ease-out;
-o-transition:      -o-transform $amount-of-time ease-out;
-ms-transition:     -ms-transform $amount-of-time ease-out;
transition:         transform $amount-of-time ease-out;
22
Conqueror

Pour animer uniquement la propriété de rotation, j'ai trouvé que cela fonctionne au moins dans Chrome:

transition: transform 2.0s;

Vous pouvez définir différents temps d'animation pour différentes propriétés à l'intérieur de la propriété de transition:

transition: transform 2.0s, color 5.0s, font-size 1.0s;

L'astuce avec la propriété rotate est précisément que vous devez utiliser la propriété transform à la place. Intuitivement, cela devrait fonctionner mais ne fonctionne PAS:

transition: rotate 2.0s; /* DOES NOT WORK */

À la place, vous devez utiliser transform à la place de rotate:

transition: transform 2.0s;

C'est probablement parce que rotate: 90deg Est un raccourci pour transform: rotate(90deg)

Remarque

transition est désormais pris en charge dans les dernières versions de tous les principaux navigateurs. Je suppose que si vous voulez plus de compatibilité avec les anciens navigateurs, vous pourriez faire quelque chose comme:

-webkit-transition: -webkit-transform 2.0s, color 5.0s, font-size 1.0s;
-moz-transition: -moz-transform 2.0s, color 5.0s, font-size 1.0s;
-ms-transition: -ms-transform 2.0s, color 5.0s, font-size 1.0s;
-o-transition: -o-transform 2.0s, color 5.0s, font-size 1.0s;
transition: transform 2.0s, color 5.0s, font-size 1.0s;
6
Chris Dutrow