使用纯Javascript/JQuery镜像图像 [英] Mirror an image using Pure Javascript/JQuery

问题描述

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

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.

我想要的只是简单地镜像" img标签的图像.

What I want is to simply "mirror" the img tag's image.

任何人都可以帮忙吗?预先感谢.

Anyone can help ? Thanks in advance.

推荐答案

在jsfiddle中尝试以下示例:

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代码:

<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>

单击此处

这篇关于使用纯Javascript/JQuery镜像图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！