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/AVvXsEizc8eEW1GbRLb56tlD-qpqg4kYmpqlCpzmEJo55ehvKBWpFdWma9I6Brb6y1WbkYkMr5HneUZDrvmyY4YB58V-OOyFuFDH4ExROPb1sUX5GzIJXhDMM9XT5iiYzj37pop31AkX9b1lJ40/s1600/Screenshot_2015-02-03-17-55-46.png'/></div><divclass="reflection"><imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizc8eEW1GbRLb56tlD-qpqg4kYmpqlCpzmEJo55ehvKBWpFdWma9I6Brb6y1WbkYkMr5HneUZDrvmyY4YB58V-OOyFuFDH4ExROPb1sUX5GzIJXhDMM9XT5iiYzj37pop31AkX9b1lJ40/s1600/Screenshot_2015-02-03-17-55-46.png'/></div>

Click here