Question

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

Answer 1

jQuery:

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

CSS:

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

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

Demo