Comment implémenter le retournement d'image en CSS3

Aujourd'hui, je vais partager avec vous comment utiliser les connaissances en CSS3 pour créer une fonction de retournement d'image. L'effet de retournement d'image en CSS3 est principalement obtenu en définissant une animation de transition et une animation de rotation de transformation

[Cours recommandés : Tutoriel CSS3]

Analyse de cas

L'idée de l'effet de retournement d'image : utilisez d'abord le positionnement pour superposer deux images ensemble et devez également masquer l'image au dos, afin que l'effet is Il n'y a qu'une seule image sur la page, mais lorsque la souris est déclenchée, l'image derrière est tournée et affichée au premier plan, tandis que l'image initialement au premier plan est tournée et cachée à l'arrière.

(1) position : positionnement

relatif : positionnement relatif

absolu : positionnement absolu

(2) visibilité arrière : masquer le div pivoté. dos de l'élément

visible : le dos est visible

caché : le dos est invisible

(3) l'attribut z-index

définit l'élément Ordre d'empilement, plus la valeur définie est grande, plus le niveau est élevé et plus il se trouve tôt sur la page

(4) transition-property : définissez le nom de la propriété CSS qui nécessite un effet de transition

none : aucun attribut n'obtiendra les effets de transition

all : toutes les propriétés obtiendront des effets de transition

propriété : définissez une liste de noms de propriétés CSS qui appliquent des effets de transition, la liste est séparée par des virgules.

(5) durée de transition : combien de secondes ou de millisecondes il faut pour terminer l'effet de transition

(6) fonction de synchronisation de transition : la courbe de vitesse pour terminer l'effet de transition

linéaire : vitesse uniforme

facilité : d'abord lente, puis rapide, puis à nouveau lente Spécifie l'effet de transition qui commence à une vitesse lente, puis devient rapide, puis se termine à une vitesse lente (cubique). -bézier(0.25,0.1,0.25,1)).       

  cubique-bezier(n,n,n,n) : définissez votre propre valeur dans la fonction cubique-bézier. Les valeurs possibles sont des valeurs comprises entre 0 et 1.

(7) transition-delay : si l'effet de transition est retardé et quand il commence

(8) attribut transform : l'élément applique une transformation 2D ou 3D

Exemple : rotateX( 180deg) : Rotation de 180 degrés le long du 🎜>

Code complet :

Ce cas s'exécute dans le navigateur Chrome

Rendu

Effets dynamiques

<br/>

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. , j'espère que tout le monde aura une certaine compréhension du retournement des images.

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!