Per visualizzare questo contenuto devi accettare di utilizzare i cookie.

MyDigitalia
il digitale usato seriamente

effetto mirror

effetto mirror

mirror orizzontale

Ottenuto con trasform:matrix

blogger blogger

prova di testo prova di testo (non va su FF)

Ottenuto con trasform:scale

blogger blogger

prova di testo prova di testo (non va su FF)

prova per i webkit

mirror verticale

con transform:rotate

Con transform:rotate l'effetto specchio non è perfetto, manca il flip orizzontale:

blogger
blogger

con transform:scaleY

Allora bisogna ricorrere a transform:scaleY(-1), così:

blogger
blogger

Prova di flip verticale del testo

Prova di flip verticale del testo

conclusione

Il modo più semplice e più efficace di applicare un effetto specchio è transform:scale: transform:scale per il flip orizzontale, transform:scaleY per il flip verticale.

un esperimento

sul testo

Aggiungiamo al testo rispecchiato verticalmente in basso un effetto gradient senza immagini

Testo da mirrorizzare

Testo da mirrorizzare

su immagini

Il trucco sperimentato sul testo non funziona sulle immagini:

blogger
blogger

Come si vede manca l'effetto sfumatura. Bisognerebbe sfumare un'immagine con CSS. Qualcosa si può fare:

immagine dritta

l'immagine di sfondo è sfumata con css: sembra rispecchiarsi

Da notare che abbiamo dovuto usare non il tag img, ma una immagine di sfondo di un box (background-image).

Come si fa a sfumare un'immagine con css? Ricorrendo a due “trucchi”:

Per visualizzare questo contenuto devi accettare di utilizzare i cookie.