2

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.

Eds Tan
  • 43
  • 2
  • 11
  • 1
    My gut is to assume the answer is no, but can you rely on an HTML5 canvas or would that break the device restriction? – ramblinjan Mar 01 '13 at 02:06
  • This looks like a duplicate of http://stackoverflow.com/questions/8168217/html-canvas-how-to-draw-a-flipped-mirrored-image – Serj Sagan Mar 01 '13 at 02:08
  • What's the device? If it supports css3 (ie. webkit) then it's simple, no JS needed, http://jsbin.com/ugecus/1/edit – elclanrs Mar 01 '13 at 02:09
  • I tried CSS3 but it won't work on my device. My boss mention about not using HTML5 for my project. – Eds Tan Mar 01 '13 at 02:13
  • Should be possible in IE using DX filters, and I believe in Firefox using SVG filters. Not sure if your device supports either. – James Mar 01 '13 at 03:07

1 Answers1

3

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

Rubyist
  • 6,486
  • 10
  • 51
  • 86