Comment configurer l'élément pour qu'il tourne toujours en CSS

Comment configurer l'élément pour qu'il pivote en continu avec CSS : créez d'abord un exemple de fichier HTML ; puis utilisez img pour introduire l'image ; enfin utilisez le style CSS "transform:rotate(360deg)" pour définir l'élément sur faites pivoter 360 ​​degrés et passez la durée de l'animation. Définissez simplement la durée de l'animation à l'aide de la propriété.

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

Lorsque nous concevons des pages Web, nous rencontrons souvent divers problèmes. Il existe des problèmes liés à l'affichage des images. Par exemple, certaines images doivent être affichées avec des coins arrondis, cliquez sur l'image pour l'agrandir, etc.

Vous présentez principalement la méthode spécifique d'utilisation de CSS3 pour réaliser une rotation cyclique automatique à 360° des images

CSS peut utiliser l'attribut transform pour définir les éléments à faire pivoter, redimensionner, déplacer ou incliner.

Nous pouvons utiliser le style CSS transform:rotate(360deg) pour que l'élément pivote à 360 degrés.

Vous pouvez utiliser l'animation pour définir les propriétés de l'animation. La durée de l'animation peut être définie via la propriété animation-duration.

CSS3 peut définir l'angle de rotation de l'élément à 360 degrés en définissant le style CSS de l'élément sur transform:rotate(360deg), puis définir la durée de l'animation via l'attribut animation-duration pour obtenir une rotation continue de l'élément.

Exemple :

Code HTML :

<div class="demo">
<img  class="an img lazy"  src="/static/imghw/default1.png"  data-src="1.jpg"       style="max-width:90%"  style="max-width:90%"/ alt="Comment configurer l'élément pour qu'il tourne toujours en CSS" >

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: 200px;}

Rendu :

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!