Comment faire pivoter une image et l'inverser avec CSS

Méthode : 1. Utilisez le style "animation: name time" pour lier l'animation à l'élément d'image ; 2. Utilisez l'instruction "@keyframes name {50%{transform:rotate(rotation angle value);}}" pour définir l'action d'animation de rotation de l'image pour obtenir l'effet de rotation et d'inversion de l'image.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment faire pivoter et inverser des images en CSS

En CSS, vous pouvez utiliser l'attribut animation pour lier l'animation à un élément. L'attribut animation peut contrôler la durée et le nombre d'animations.

En CSS, vous pouvez utiliser l'attribut d'animation et la règle @keyframes pour obtenir l'effet d'animation de la mise à l'échelle des éléments. Grâce à la règle @keyframes, vous pouvez créer des animations.

Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation.

Spécifiez l'heure à laquelle le changement se produit en pourcentage, ou via les mots-clés "de" et "à", qui sont équivalents à 0% et 100%. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Utilisez l'attribut transform avec la fonction rotate() pour définir l'action d'animation de rotation.

L'exemple est le suivant :

animation: name duration timing-function delay iteration-count direction;

Résultat de sortie :

(Partage de vidéos d'apprentissage :

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!