使用Pure Javascript/JQuery镜像图像

Question

由于设备限制，我只能使用javascript或JQuery来“镜像”图像。 我曾尝试Reflection.js，但那不是我想要的。

我想要的只是“镜像”img标签的图像。

任何人都可以帮忙吗？提前致谢。

Answer 1

试试这个例子提及的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代码：

<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