title: Way to create a Skewed Scaled Reflection in HTML
body: <p><strong>I have to parse an XML document &amp; create a HTML element for every instance element I find.</strong></p>
  
  <p>I need to create a img where its reflection <em>AND ONLY its reflection not the image</em> has a skew &amp; is scaled. This means that I just cannot go:</p>
  
  <pre><code>img.style.WebkitTransform = "scale(0.26) skew(-1deg)"; // this will make the image scale &amp; skew also
  </code></pre>
  
  <p><strong>Can you suggest a way/technique that would be the most efficient &amp; easiest way to create a scaled &amp; skewed reflection of an img element?</strong></p>
  
  <p>Which of these would be best(although if you have better ideas I'd love to hear them :)):<br>
  - Create another HTML img below the actual image then adjust its style to make it upside down, scaled &amp; skewed.<br>
  - Use a server side language(C#) to create the reflection as a .png<br>
  - Use CSS3 techniques/ways I dont know about?<br>
  - Use HTML5 canvas to create both the image &amp; the scaled skewed reflection? This is a web application SOLELY for the iPad so it doesn't matter about browser-HTML5 compatibility.  </p>
  
  <p>This is an example of the XML file I parse:   </p>
  
  <pre><code>&lt;instance type="ImageBox" width="439" height="292" top="153" left="460" tReflectionEnabled="true" tReflectionScale="0.26" tReflectionAlpha="0.18" tReflectionSkew="-1"/&gt;
  </code></pre>