Vediamo come è possibile creare un'immagine riflessa usando una proprietà molto importante dei css "transform" in particolare transform scale.
L'immagine che uso per creare l'effetto di riflesso è questa:
Il codice HTML è il seguente:
Codice HTML
<div class="box_images">
<img src="images/montagne.png">
<img src="images/montagne.png" class="reflection">
</div>all'interno del contenitore 'box_images' è contenuta due volte l'ìmmagine montagne.png, alla seconda copia dell'immagine, cioè quella sotto, ho dato una classe 'reflection'.
A questo punto entra in gioco la proprietà transform css che viene applicata all'immagine '.reflection', il codice css è il seguente:
Codice CSS
img.reflection
{
margin-top: -5px;
transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
filter: flipv;
opacity:0.65;
filter: alpha(opacity='30');
}il margin-top di -5px serve a far combaciare il riflesso con l'immagine sopra, e filter: flipv è il prefisso per la compatibilità dei browser, internet explorer in questo caso utilizza il filtro flipv, opacity e filter:alpha, aggiungono trasparenza all’immagine.