Membuat Efek Cermin Dengan CSS

Metode sederhana ini dapat menghasilkan gambar dengan efek bayangan/ mirror (Reflecting Images) yang memungkinkan kita untuk mencerminkan gambar pada latar belakang apapun. Mudah dibuat karena hanya dengan menggunakan CSS.



Untuk membuatnya, kita hanya memerlukan data seperti berikut ini:

CSS

<style type="text/css">
.outerBlack {width:420px; height:420px; background:#000; text-align:center; padding:25px; border-radius:20px; margin:10px 0;}
.element {position:relative; float:left; margin-right:15px;}
.element:nth-last-of-type(1) {margin:0;}

.element:before {display:block; width:100%; height:100%; position:absolute; top:100%; left:0; z-index:10;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.element:after {content:""; display:block; width:100%; height:100%; position:absolute; top:100%; left:0; z-index:100;}
.outerBlack .element:after {
background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
}
.p1:before {content:url(https://sites.google.com/site/archivesiugi/home/load/Hot-dan-Sexy.jpg);}
</style>

HTML

<div class="outerBlack">
<div class="element p1"><img src="https://sites.google.com/site/archivesiugi/home/load/Hot-dan-Sexy.jpg" alt="" /></div>
</div>

sumber: cssplay