Capovolgere/specchio un'immagine in orizzontale + verticalmente con CSS

Le immagini sono un componente applicativo essenziale e divertente. Contribuiscono al design dell'applicazione e gli danno un bellissimo layout. Molte delle proprietà offerte da CSS sono utili in vari modi. Più specificamente, fornisce caratteristiche che consentono la regolazione dell'immagine in qualsiasi direzione, come capovolgere in verticale o in orizzontale, a rotazione e altro ancora.

Questo articolo ti guiderà su come capovolgere o rispecchiare un'immagine in orizzontale e verticalmente con CSS.

Come capovolgere/rispecchiare un'immagine in orizzontale e verticalmente con CSS?

Esistono vari metodi che possono essere utilizzati per capovolgere o ruotare le immagini in CSS. Discuteremo quanto segue:

• Metodo 1: usando “trasformazione: scala ()" proprietà
• Metodo 2: usando "trasformazione: rote ()" proprietà

Metodo 1: come capovolgere/specchio un'immagine in orizzontale e verticalmente usando la proprietà "trasforma: scala ()"?

IL "trasformazione: scala ()"La proprietà ridimensiona l'immagine nel piano 2D. La scala () specifica due valori di coordinate per l'asse x e l'asse y. La quantità di ridimensionamento eseguita in ciascuna direzione è determinata dalle sue coordinate. IL "trasformazione: scalex ()"La proprietà ridimensiona l'immagine in orizzontale.

Esempio

Aggiungi due immagini nel file HTML. Il primo sarà tenuto come originale in tutto l'esempio. Mentre l'altro verrà applicato con le proprietà CSS:

• IL ""Il tag è utilizzato per includere un'immagine.
• IL "src"L'attributo specifica l'URL dell'immagine.
• IL "Al"Viene utilizzato per specificare il testo se l'immagine non si carica nella pagina Web.
• IL "larghezza"Attributo imposta l'ampiezza dell'immagine.
• IL "classe"È impostato con un nome per accedere all'immagine in CSS.

Ecco il codice HTML dello scenario come menzionato in precedenza:

Inizialmente, la pagina Web sarà simile a questa:

Esempio 1: lanciare l'immagine in orizzontale usando la proprietà "Transform: Scalex ()"

In CSS, aggiungi il "trasformazione: scalex ()"Proprietà per scalare l'immagine orizzontale:

.Flip
trasformazione: scalex (-1);

Produzione

Esempio 2: lanciare l'immagine verticalmente usando la proprietà "Transform: Scaley ()"

Per ridimensionare l'immagine verticalmente in CSS, usa il “trasformazione: scaley ()" proprietà:

trasformazione: scaley (-1);

Produzione

Metodo 2: come capovolgere/rispecchiare un'immagine in orizzontale e verticalmente usando la proprietà "trasforma: rota ()"?

Il CSS "trasformazione: rotate ()"Ruota l'immagine attorno al punto fisso in un piano 2D. La funzione "rotatex ()" ruota l'immagine sull'asse x e il "rotatey ()" viene utilizzata per ruotare sull'asse y.

Esempio 1: lanciare l'immagine in orizzontale usando la proprietà "Transform: rotatey ()"

In CSS, aggiungi il "trasformare"Proprietà con il valore"rotatey ()" nel "Flip"Classe per capovolgere l'immagine orizzontalmente a"180" gradi:

Transform: Rotey (180DEG);

Produzione

Esempio 2: lanciare l'immagine verticalmente usando la proprietà "Transform: rotatex ()"

Aggiungi il CSS "trasformare"Proprietà con il valore"rotatex ()"Per capovolgere l'immagine verticalmente:

Trasformazione: rotatex (180DEG);

Produzione

Come capovolgere/rispecchiare un'immagine in verticale o orizzontalmente su?

Per imparare a capovolgere un'immagine in verticale o in orizzontale, prova i seguenti passaggi.

Passaggio 1: creare un file HTML

Innanzitutto, seguire i passaggi forniti per creare un file HTML:

• Aggiungere un ""Elemento e assegnarlo una classe"Flip-Box".
• All'interno di questa carta, aggiungi un altro "" con la classe "flip-card".
• Quindi, aggiungi un "Tag con il "src","Al", E "stile"Attributi.

Ecco il codice HTML:

Passaggio 2: stile "flip-box" di stile

IL ".Flip-Box"Utilizzato per accedere al contenitore con la classe"Flip-Box":

.flip-box
Posizione: relativo;
larghezza: 300px;
Altezza: 300px;
Margine: auto;

Le proprietà menzionate nello snippet di codice sopra sono descritte di seguito:

• "posizione"Proprietà con il valore"parente"Imposta la posizione dell'elemento in base alla sua posizione attuale.
• IL "larghezza" E "altezza"Le proprietà sono utilizzate per impostare l'area dell'elemento.
• "margine"La proprietà aggiunge spazi attorno all'elemento.

Passaggio 3: classe "flip-card" di stile

Ora, modella il "flip-card" classe:

.flip-card
Posizione: assoluto;
larghezza: 100%;
Altezza: 100%;
Transizione: tutti 0.Facilità 5s;

La descrizione delle proprietà sopra fornite è menzionata di seguito:

• "posizione" con il "assoluto"Il valore imposta la posizione dell'elemento rispetto all'elemento quasi posizionato.
• "transizione"La proprietà regola il movimento lento degli elementi entro una durata specificata.

Passaggio 4: elemento "img" stile

IL ""L'elemento è disegnato con il CSS"raggio di confine" proprietà:

img
raggio di confine: 10px;

Qui, il "raggio di confine"La proprietà imposta gli angoli dell'immagine come rotondo.

Passaggio 5: capovolgere un'immagine verticalmente su

Per capovolgere l'immagine su Hover, il CSS ": Hover"La classe pseudo è stata utilizzata:

.Flip-Box: hover .flip-card
Trasformazione: rotatex (180DEG);

Produzione

Passaggio 6: capovolgere un'immagine orizzontalmente su

IL "trasformazione: rotatey ()"La proprietà può essere utilizzata per capovolgere l'orizzontale dell'immagine:

.Flip-Box: hover .flip-card
Transform: Rotey (180DEG);

Produzione

Abbiamo compilato gli approcci per capovolgere/specchio un'immagine in orizzontale e verticalmente con CSS.

Conclusione

Per capovolgere un'immagine in HTML, il CSS "trasformare"Proprietà con i valori"scala()" E "ruotare()"Sono utilizzati. IL "scalex ()" E "rotatey ()"Sono regolati per capovolgere l'immagine in orizzontale. IL "scaley ()" E "rotatex ()"Sono impostati per capovolgere l'immagine verticalmente. Per aggiungere un effetto hover, il CSS ": Hover"Viene applicata la classe pseudo. Questo post ha spiegato molteplici procedure su come capovolgere un'immagine in orizzontale e verticalmente in CSS.