Comment faire pivoter l'image en CSS

Comment configurer l'image pour qu'elle pivote en continu avec CSS : Vous pouvez la définir en utilisant l'attribut d'animation et l'attribut de transformation, tels que [-webkit-transform: rotate(360deg);

L'environnement d'exploitation de ce tutoriel : Système Windows 10, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

Comment configurer l'image pour qu'elle pivote continuellement en CSS :

Attributs associés :

animation attribut d'animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Valeur de l'attribut :

• animation-name Spécifie le nom de l'image clé à laquelle être liée le sélecteur

• animation-duration spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer l'animation

• animation-timing-function définit la façon dont l'animation terminera un cycle

• animation-delay Définit l'intervalle de retard avant le début de l'animation.

• animation-iteration-count Définit le nombre de fois que l'animation est jouée.

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

• animation-fill-mode spécifie le style à appliquer à l'élément lorsque l'animation n'est pas en cours de lecture (lorsque l'animation est terminée, ou lorsque l'animation a un délai avant de commencer à jouer ).

• animation-play-state précise si l'animation est en cours d'exécution ou en pause.

• initial Définissez la propriété sur sa valeur par défaut.

• hériter Hériter des attributs de l'élément parent. La propriété

Transform applique une transformation 2D ou 3D à un élément. Cette propriété vous permet de faire pivoter, mettre à l'échelle, déplacer, incliner, etc. l'élément.

transform: none|transform-functions;

Valeur de l'attribut :

• aucun La définition n'effectue pas de conversion.

• matrix(n,n,n,n,n,n) Définit une transformation 2D, en utilisant une matrice de six valeurs.

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) définit la transformation 3D, Utilisez une matrice 4x4 de 16 valeurs.

• translate(x,y) Définir la transformation 2D.

• translate3d(x,y,z) Définir la transformation 3D.

Implémentation du code :

Code HTML :

<div class="demo">
    <img  class="an img" src="/test/img/2.png"    style="max-width:90%"  style="max-width:90%"/ alt="Comment faire pivoter l'image en CSS" >
</div>

Code de rotation :

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

Effet d'implémentation :

Recommandations associées : Tutoriel 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!