Immagini riflesse con CSS

Il Flipping è una tecnica utilizzata dai grafici per applicare un effetto di riflesso sulle immagini rendendole visualizzabili come attraverso uno specchio realizzando, di fatto, una sorta di effetto riflesso. Effetti simili vengono ottenuti in genere attraverso l’utilizzo di programmi per la grafica, è però possibile applicare l’effetto flip ad un’immagine anche tramite un semplice selettore CSS.

Attraverso CSS, quindi, avremo la possibilità di riflettere un’immagine sia orizzontalmente che verticalmente. In questo articolo vedremo come creare un interessante effetto riflesso su un’immagine mediant la proprietà CSS transform.

Per prima cosa vediamo l’immagine sulla quale andremo ad operare:

Di seguito il codice HTML che andremo ad incorporare all’interno della nostra pagina:

<div class="img-riflessa"> 
  <img src="colosseo.jpg">
  <img src="colosseo.jpg" class="riflesso"> 
</div>

Per finire vediamo il CSS che andremo ad applicare per realizzare l’effetto riflesso sulla nostra immagine:

.img-riflessa img {
  display: block;
}
.img-riflessa img.riflesso
{ 
  transform: scaleY(-1); 
  -webkit-transform: scaleY(-1); 
  -moz-transform: scaleY(-1); 
  -ms-transform: scaleY(-1); 
  -o-transform: scaleY(-1); 
  filter: flipv; 
  opacity: 0.70; 
  filter: alpha(opacity='30'); 
}

Questo l’output che abbiamo ottenuto:

Come potete notare la seconda immagine appare come fosse riflessa nonostante si tratti della stessa identica immagine con la sola differenza che a quest’ultima è stata applicata un’apposita classe CSS.

Come potete vedere il risultato è quello di un’immagine che sembra riflessa in una sorta di specchio d’acqua.

Il vantaggio di utilizzare CSS al posto di un programma di grafica sta nel fatto che il primo è in grado di applicare l’effetto di riflesso direttamente sul file sorgente, senza la necessità di crearne una copia modificata.