Comment faire pivoter des images avec CSS

Comment faire pivoter des images avec CSS : créez d'abord un exemple de fichier HTML ; puis introduisez les images via la balise img ; et enfin ajoutez des attributs de transformation et de style d'animation à l'image img pour obtenir l'effet de rotation de l'image.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Nous pouvons ajouter des attributs de transformation et de style d'animation à l'image img pour obtenir l'effet de rotation de l'image.

Exemple :

Code HTML :

<div class="demo">
    <img class="an img" src="/test/img/2.png" width="500" height="500"/>
</div>

Code CSS :

.demo{text-align: center;
    margin-top: 100px;}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.an{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
.img{border-radius: 250px;}

Nous avons ajouté des attributs de transformation et de style d'animation à l'image img, ce qui permet à l'image d'atteindre Effet d'animation de rotation à 360 degrés.

La méthode pour obtenir l'effet de rotation automatique des images animées CSS est celle mentionnée ci-dessus. Tant que vous maîtrisez les propriétés de transformation et d'animation en CSS, vous pouvez obtenir la plupart des effets d'animation. Leurs principes sont fondamentalement les mêmes.

L'attribut transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément. Avec la méthode rotate(), l’élément pivote dans le sens des aiguilles d’une montre d’un angle donné. Les valeurs négatives sont autorisées et l'élément pivotera dans le sens inverse des aiguilles d'une montre. L'attribut

animation est un attribut raccourci permettant de définir six attributs d'animation :

animation-name spécifie le nom de l'image clé qui doit être lié au sélecteur.

animation-duration spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes.

animation-timing-function spécifie la courbe de vitesse de l'animation.

animation-delay spécifie le délai avant le début de l'animation.

animation-iteration-count spécifie le nombre de fois que l'animation doit être jouée.

animation-direction précise si l'animation doit être jouée à l'envers à tour de rôle.

[Apprentissage recommandé : Tutoriel vidéo CSS]

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!