Comment faire la transition ne fait que tourner la transformation?

Je suis en utilisant un tas d'éléments pour composer une image d'arrière-plan et ils sont tous absolument position autour de, tournant librement.

Problème est que je voudrais transition, seule la rotation de ces objets, pas le top, ni à gauche propriétés. Et apparemment transition: transform 30s; n'est pas autorisé. J'ai eu la brillante idée de faire de la

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

Mais qui ne fonctionne pas. Comment puis-je résoudre ce problème?

source d'informationauteur Digger

  1. 20

    Transformer est un fournisseur préfixe

    Au lieu de

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

    ne

    -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;
  2. 3

    Pour animer seule la rotation de la propriété, j'ai trouvé cela fonctionne au moins en Chrome:

    transition: transform 2.0s;

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

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

    Le truc avec la rotate propriété plus précisément, c'est que vous avez l'utilisation de la transform propriété plutôt. Intuitivement, cela devrait fonctionner, mais ne fonctionne PAS:

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

    Au lieu de cela, vous devez utiliser transform en place de rotate:

    transition: transform 2.0s;

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

    Remarque

    transition est maintenant pris en charge dans les dernières versions de tous les navigateurs principaux. 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;