Javascript 在HTML中创建倾斜缩放反射的方法

我必须解析一个XML文档并为我找到的每个实例元素创建一个HTML元素。

我需要创建一个img，其中它的反射，只有它的反射，而不是图像有倾斜&被缩放。这意味着我不能去：

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

您能推荐一种最有效、最简单的方法/技术来创建img元素的缩放和倾斜反射吗？

以下哪一个是最好的（尽管如果你有更好的想法，我很想听听：）：
-在实际图像下方创建另一个HTML img，然后调整其样式，使其倒置、缩放和倾斜。
-使用服务器端语言（C#）将反射创建为.png
-使用我不知道的CSS3技术/方法？
-使用HTML5画布创建图像和缩放的倾斜反射？这是一款专为iPad开发的web应用程序，因此浏览器与HTML5的兼容性并不重要

这是我解析的XML文件的一个示例：

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

jQuery：

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

$（“img”）。每个（函数（）{
$（此）.wrap（“”）；
$（this.after（$（this.clone（）.addClass（“imgCopy”））；
});

CSS:

.imgCopy{-webkit变换：缩放（.26）倾斜（-1deg）；

}

我对此进行了测试，并在iOS模拟器和iPad上运行

---

您要么复制图像并进行假反射，要么使用服务器端。