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.