effetto mirror

mirror orizzontale

Ottenuto con `trasform:matrix`

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

Ottenuto con `trasform:scale`

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:

con `transform:scaleY`

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

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

su immagini

Il trucco sperimentato sul testo non funziona sulle immagini:

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”:

lo sfondo multiplo (multiple background)
e combinando un gradient tra bianco e trasparente come immagine di sfondo da affiancare all'immagine da sfumare.

pagine di questa sezione

internet

🛒 ricerche / acquisti

cerca libri su Amazon sul tema: effetto mirror effetto specchio mirror specchio riflettere immagini capovolgere immagini e-book e-reader ereader Kindle Kobo computer PC hardware software sistema operativo linux Apple cultura libri on-line effetto mirror .