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 tag's image.

Anyone can help ? Thanks in advance.

回答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>
    <img src='http://2.bp.blogspot.com/-TslgI6ySuW8/VNC-u9YQYeI/AAAAAAAABtA/mviMstL4pIk/s1600/Screenshot_2015-02-03-17-55-46.png'/>
</div>
<div class="reflection">
    <img src='http://2.bp.blogspot.com/-TslgI6ySuW8/VNC-u9YQYeI/AAAAAAAABtA/mviMstL4pIk/s1600/Screenshot_2015-02-03-17-55-46.png'/>
</div>

Click here

来源：https://stackoverflow.com/questions/15149236/mirror-an-image-using-pure-javascript-jquery