Flip o ribaltamento orizzontale e verticale con CSS3

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:

Flip con ribaltamento orizzontale

E’ il ribaltamento sull’asse orizzontale (la destra va a sinistra e viceversa), si ottiene con:
transform: scaleX(-1)

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)

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);
}

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