Mirror An Image Using Pure Javascript/jquery

Due to device restriction, I had to use only javascript or JQuery to 'Mirror' an image. I had tried Reflection.js but that is not I want. What I want is to simply 'mirror' the img

Solution 1:

Try this example mention in jsfiddle :

CSS :

div.reflection
{
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}

img{
    height: 150px;
    width: 150px;
}

HTML Code :

<div><imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8vb0A1eBRzwThKE_we-1aEvS-XIF9PHu1GbGS7SfKX8vuEfCayABPC9Hrv-bpM8jf68V45mZkXPT6swTG-uJ6LpFPjbXVDx69GVYu9d_-Jh8kpv1fgCakraGllmCPWPcqy7E2DF6QOms/s1600/Screenshot_2015-02-03-17-55-46.png'/></div><divclass="reflection"><imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8vb0A1eBRzwThKE_we-1aEvS-XIF9PHu1GbGS7SfKX8vuEfCayABPC9Hrv-bpM8jf68V45mZkXPT6swTG-uJ6LpFPjbXVDx69GVYu9d_-Jh8kpv1fgCakraGllmCPWPcqy7E2DF6QOms/s1600/Screenshot_2015-02-03-17-55-46.png'/></div>

Click here