Way to create a Skewed Scaled Reflection in HTML


I have to parse an XML document & create a HTML element for every instance element I find.

I need to create a img where its reflection AND ONLY its reflection not the image has a skew & is scaled. This means that I just cannot go:

img.style.WebkitTransform = "scale(0.26) skew(-1deg)"; // this will make the image scale & skew also

Can you suggest a way/technique that would be the most efficient & easiest way to create a scaled & skewed reflection of an img element?

Which of these would be best(although if you have better ideas I’d love to hear them :)):
 — Create another HTML img below the actual image then adjust its style to make it upside down, scaled & skewed.
 — Use a server side language(C#) to create the reflection as a .png
 — Use CSS3 techniques/ways I dont know about?
 — Use HTML5 canvas to create both the image & the scaled skewed reflection? This is a web application SOLELY for the iPad so it doesn’t matter about browser-HTML5 compatibility.

This is an example of the XML file I parse:

<instance type="ImageBox" width="439" height="292" top="153" left="460" tReflectionEnabled="true" tReflectionScale="0.26" tReflectionAlpha="0.18" tReflectionSkew="-1"/>

Problem courtesy of: Jake M



$("img").each(function() {
$(this).wrap('<div class="imgWrap" />');


.imgCopy { -webkit-transform:scale(.26) skew(-1deg); }

I tested this and it works in the iOS simulator with the iPad.


Solution courtesy of: bookcasey

View additional discussion.