Pourquoi ma rotation d'image CSS3 à 360 degrés ne fonctionne-t-elle pas ?

Animation de rotation CSS3

Vous rencontrez des problèmes avec votre CSS lorsque vous tentez de faire pivoter une image à 360 degrés. Le code CSS fourni semble inclure une erreur de syntaxe dans les images clés, ce qui empêche l'exécution de l'animation. Examinons les détails du problème et apportons les corrections nécessaires.

L'erreur de syntaxe réside dans les propriétés « from » et « to » dans les déclarations d'images clés. Pour les navigateurs modernes, la propriété de transformation « transform » fonctionne plus efficacement que les préfixes des fournisseurs tels que « -webkit-transform » et « -moz-transform ». De plus, la propriété 'to' doit être définie à 100% au lieu de 'from'.

Voici le code CSS corrigé :

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}

@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}

Dans le code corrigé, la propriété 'from' a été supprimé et la valeur de transformation dans la propriété 'to' a été mise à jour en 'rotate(360deg)'. De plus, les règles d'images clés n'utilisent désormais que « transformer » sans préfixes de fournisseur.

Ce CSS corrigé devrait résoudre le problème d'animation, permettant à l'image de pivoter de 360 ​​degrés en douceur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!