使用纯 Javascript/JQuery 镜像图像

【问题标题】：Mirror an image using Pure Javascript/JQuery使用纯 Javascript/JQuery 镜像图像
【发布时间】：2013-02-15 10:51:51
【问题描述】：

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

我想要的是简单地“镜像” img 标签的图像。

有人可以帮忙吗？提前致谢。

【问题讨论】：

我的直觉是假设答案是否定的，但是您可以依赖 HTML5 画布还是会打破设备限制？
这看起来像 stackoverflow.com/questions/8168217/… 的副本
设备是什么？如果它支持css3（即webkit）那就很简单，不需要JS，jsbin.com/ugecus/1/edit
我尝试了 CSS3，但它无法在我的设备上运行。我的老板提到我的项目不使用 HTML5。
应该可以在 IE 中使用 DX 过滤器，我相信在 Firefox 中使用 SVG 过滤器。不确定您的设备是否支持。

标签： javascript jquery mirror

【解决方案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

【讨论】：