Comment faire pivoter les images en continu en CSS3 ? 【Explication détaillée】

Cet article vous présentera en détail comment utiliser CSS3 pour obtenir l'effet de rotation continue des images. Lorsque nous concevons des pages Web, nous rencontrons souvent divers problèmes liés à l'affichage des images. Par exemple, certaines doivent arrondir les images. . Affichage d'angle, cliquez sur l'image pour agrandir l'affichage et d'autres effets.

Dans mon article précédent, je vous ai également présenté la méthode spécifique d'affichage des coins arrondis des images. Vous pouvez également vous référer à cet article [Comment contrôler le style aléatoire des coins arrondis des images avec du CSS ? 】

Ce qui suit vous présente principalement la méthode spécifique d'utilisation de CSS3 pour obtenir une rotation automatique à 360 degrés des images

Les exemples de code HTML sont les suivants :

<div class="demo">
    <img  class="an img" src="/test/img/2.png"    style="max-width:90%"  style="max-width:90%"/ alt="Comment faire pivoter les images en continu en CSS3 ? 【Explication détaillée】" >
</div>

L'exemple de code d'animation de rotation d'image CSS à 360 degrés est le suivant :

.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;}

Le code ci-dessus peut être directement copié et collé localement pour être testé, puis accessible via le navigateur. , l'effet sera le suivant :

En raison de la taille limite de téléchargement des images, la capture d'écran GIF a été compressée, ce qui peut empêcher la rotation de l'image. . Mais dans des circonstances normales, il tourne selon la vitesse temporelle spécifiée. Nous devons ici faire attention à l'attribut d'animation. Cet attribut est l'attribut d'abréviation de tous les attributs d'animation. Nous avons ajouté des attributs de transformation et de style d'animation à l'image img, afin que l'image puisse obtenir un 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.

Ensuite, ce qui précède est la méthode spécifique sur la façon d'utiliser CSS3 pour obtenir l'effet d'animation consistant à faire pivoter automatiquement l'image à 360 degrés. Il a une certaine valeur de référence et j’espère qu’il sera utile à des amis dans le besoin !

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!