Flip / Miroir une image horizontalement + verticalement avec CSS

Les images sont un composant d'application essentiel et divertissant. Ils contribuent à la conception de l'application et lui donnent une belle mise en page. De nombreuses propriétés proposées par CSS sont bénéfiques de diverses manières. Plus précisément, il fournit des fonctionnalités qui permettent un réglage de l'image dans n'importe quelle direction, comme se retourner verticalement ou horizontalement, rotatif et plus.

Cet article vous guidera sur la façon de retourner ou de refléter une image horizontalement et verticalement avec CSS.

Comment retourner / refléter une image horizontalement et verticalement avec CSS?

Il existe différentes méthodes qui peuvent être utilisées pour retourner ou faire pivoter les images dans CSS. Nous discuterons des éléments suivants:

• Méthode 1: Utilisation de «Transform: Scale ()" propriété
• Méthode 2: Utilisation de «Transformer: Rotate ()" propriété

Méthode 1: Comment retourner / refléter une image horizontalement et verticalement à l'aide de la propriété «Transform: Scale ()»?

Le "Transform: Scale ()»La propriété redimensionne l'image dans le plan 2D. L'échelle () spécifie deux valeurs de coordonnées pour l'axe x et l'axe y. La quantité de mise à l'échelle effectuée dans chaque direction est déterminée par ses coordonnées. Le "Transform: scalex ()»La propriété évolue l'image horizontalement.

Exemple

Ajouter deux images dans le fichier html. Le premier sera gardé comme original tout au long de l'exemple. Tandis que l'autre sera appliqué avec les propriétés CSS:

• Le "»La balise est utilisée pour inclure une image.
• Le "SRC»L'attribut spécifie l'URL de l'image.
• Le "alt"Est utilisé pour spécifier le texte si l'image ne se charge pas sur la page Web.
• Le "largeur»L'attribut définit l'étendue de l'image.
• Le "classe"Est défini avec un nom pour accéder à l'image en CSS.

Voici le code HTML du scénario comme mentionné précédemment:

Initialement, la page Web ressemblera à ceci:

Exemple 1: Retourner l'image horizontalement à l'aide de la propriété «Transform: ScaleX ()»

Dans CSS, ajoutez le "Transform: scalex ()»Propriété pour évoluer l'image horizontalement:

.retourner
transformée: scalex (-1);

Sortir

Exemple 2: Retourner l'image verticalement à l'aide de la propriété «Transform: Scaley ()»

Pour mettre à l'échelle l'image verticalement dans CSS, utilisez le «Transform: Scaley ()" propriété:

transformée: Scaley (-1);

Sortir

Méthode 2: Comment retourner / refléter une image horizontalement et verticalement à l'aide de la propriété «transform: rotate ()»?

Le CSS "Transformer: Rotate ()”Tourne l'image autour du point fixe dans un plan 2D. La fonction «rotatex ()» fait pivoter l'image sur l'axe x, et le «rotatey ()» est utilisé pour tourner sur l'axe y.

Exemple 1: Retourner l'image horizontalement à l'aide de la propriété «Transform: Rotatey ()»

Dans CSS, ajoutez le "transformer«Propriété avec la valeur»Rotatey ()" dans le "retourner"Classe pour retourner l'image horizontalement à"180" degrés:

transformée: Rotatey (180deg);

Sortir

Exemple 2: Retourner l'image verticalement à l'aide de la propriété «Transform: Rotatex ()»

Ajouter le CSS "transformer«Propriété avec la valeur»rotatex ()«Pour retourner l'image verticalement:

transformée: rotatex (180deg);

Sortir

Comment retourner / refléter une image verticalement ou horizontalement sur le plan de volant?

Pour apprendre à retourner une image verticalement ou horizontalement en survol, essayez les étapes suivantes.

Étape 1: Créez un fichier HTML

Tout d'abord, suivez les étapes fournies pour créer un fichier HTML:

• Ajouter un ""Element et attribuez-lui une classe"flip-box".
• À l'intérieur de cette carte, ajoutez un autre "" avec la classe "carreau".
• Ensuite, ajoutez un ""Tag avec le"SRC","alt", et "style" les attributs.

Voici le code HTML:

Étape 2: Style «Flip-Box» Classe

Le ".flip-box"Utilisé pour accéder au conteneur avec la classe"flip-box»:

.flip-box
Position: relative;
Largeur: 300px;
hauteur: 300px;
marge: auto;

Les propriétés mentionnées dans l'extrait de code ci-dessus sont décrites ci-dessous:

• "position«Propriété avec la valeur»relatif"Définit la position de l'élément en fonction de son emplacement actuel.
• Le "largeur" et "hauteur»Les propriétés sont utilisées pour définir la zone de l'élément.
• "marge»La propriété ajoute des espaces autour de l'élément.

Étape 3: Style «Classe à carte morte»

Maintenant, style le «carreau" classe:

.flip-carte
Position: absolue;
Largeur: 100%;
hauteur: 100%;
transition: tout 0.5s facilité;

La description des propriétés ci-dessus est mentionnée ci-dessous:

• "position" avec le "absolu»La valeur définit l'emplacement de l'élément par rapport à l'élément presque positionné.
• "transition»La propriété ajuste le mouvement lent des éléments dans une durée spécifiée.

Étape 4: Élément de style «IMG»

Le ""L'élément est stylé avec le CSS"rayon frontalier" propriété:

img
Border-Radius: 10px;

Ici le "rayon frontalier»La propriété définit les coins de l'image en rond.

Étape 5: Retournez une image verticalement sur planant

Pour retourner l'image en volant, le CSS ":flotter«La pseudo-classe a été utilisée:

.Flip-Box: survolez-vous .flip-carte
transformée: rotatex (180deg);

Sortir

Étape 6: Flip une image horizontalement en survolant

Le "Transform: Rotatey ()»La propriété peut être utilisée pour retourner l'image horizontalement:

.Flip-Box: survolez-vous .flip-carte
transformée: Rotatey (180deg);

Sortir

Nous avons compilé les approches pour retourner / refléter une image horizontalement et verticalement avec CSS.

Conclusion

Pour retourner une image en HTML, le CSS "transformer"Propriété avec les valeurs"escalader()" et "tourner()"Sont utilisés. Le "scalex ()" et "Rotatey ()«Sont ajustés pour retourner l'image horizontalement. Le "Scaley ()" et "rotatex ()«Sont définis pour retourner l'image verticalement. Pour ajouter un effet de survol, le CSS ":flotter”Une pseudo-classe est appliquée. Ce message a expliqué plusieurs procédures sur la façon de retourner une image horizontalement et verticalement dans CSS.