EthicSoft Informatica Flip Ribaltamento Orizzontale Verticale Con Css3
Licenza:
I contenuti di questo articolo sono proprietà intellettuale dei relativi autori e protetti ai sensi dell'art. 1 della legge italiana sul diritto d'autore n. 633 del 22 aprile 1941.
La copia, parziale o integrale, è illegale escluso il caso di citazioni di lunghezza massima di un singolo paragrafo e il cui testo sia completamente incluso in un link a questa pagina.

Eseguire il flip orizzontale o verticale con il CSS più semplice di quanto sembri, usando transform, vediamo come con degli esempi

Immagine originale

Questa è l’immagine che andremo a modificare, possono essere ribaltati anche testi e icone:

Logo EthicSoft

Flip con ribaltamento orizzontale

E’ il ribaltamento sull’asse orizzontale (la destra va a sinistra e viceversa), si ottiene con:
transform: scaleX(-1)
Logo EthicSoft
Può essere applicato con una semplice classe dedicata:
.flip-horizontal{
transform: scaleX(-1);
}

Flip con ribaltamento verticale

Per mandare il sotto sopra e viceversa, si usa:
transform: scaleY(-1)
Logo EthicSoft

Può essere applicato con una semplice classe dedicata:
.flip-horizontal{
transform: scaleY(-1);
}

Flip con ribaltamento su entrambi gli assi

Questo ribaltamento doppio ottiene con entrambe le primitive:
.flip-both{
transform: scaleY(-1) scaleX(-1);
}

Logo EthicSoft

Può essere applicato con una semplice classe dedicata:
.flip-both{
transform: scaleY(-1) scaleX(-1);
}

Licenza:
I contenuti di questo articolo sono proprietà intellettuale dei relativi autori e protetti ai sensi dell'art. 1 della legge italiana sul diritto d'autore n. 633 del 22 aprile 1941.
La copia, parziale o integrale, è illegale escluso il caso di citazioni di lunghezza massima di un singolo paragrafo e il cui testo sia completamente incluso in un link a questa pagina.