Comment obtenir un effet de rotation en CSS (exemple de code)

CSS est un langage de conception de style de page Web largement utilisé, et la rotation est l'un des effets couramment utilisés. La rotation via CSS peut rendre les pages Web plus belles et plus intuitives. Voici quelques codes de rotation CSS couramment utilisés à titre de référence.

1. Utilisez l'attribut transform

L'attribut transform peut faire pivoter, mettre à l'échelle, incliner, déplacer les éléments, etc. L'élément peut être pivoté à l'aide de la méthode rotate(), où deg est la valeur de l'angle de rotation, un nombre positif indique une rotation dans le sens des aiguilles d'une montre et un nombre négatif indique une rotation dans le sens inverse des aiguilles d'une montre.

Par exemple :

.rotate {
transform: rotate(45deg);
}

2. Utilisez l'attribut de transition et la méthode de rotation de transform

L'attribut de transition peut contrôler l'effet de transition de l'élément, de sorte que l'élément a une rotation douce lors de la rotation des effets de transition.

Par exemple :

.rotate {
transition : transformer 0,5s easy-in-out ;
}
.rotate:hover {
transform: rotate(45deg);
}

3. Utilisez les attributs d'animation et les @keyframes. règles

@keyframes les règles peuvent définir des images clés dans les animations CSS, et les propriétés d'animation peuvent contrôler les performances des animations CSS.

Par exemple :

.rotate {
animation : rotate-ani 2s linéaire infini ;
}
@keyframes rotate-ani {
de {

transform: rotate(0deg);

}
à {

transform: rotate(360deg);

}
}

Les éléments ci-dessus sont quelques codes de rotation CSS couramment utilisés permettent d'obtenir l'effet de rotation des éléments de différentes manières. J'espère que ces codes pourront aider les lecteurs dans le besoin et rendre la page Web plus belle et plus vivante.

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!