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

Question

我必须解析 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"/>

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); }

我对此进行了测试，它可以在 iPad 上的 iOS 模拟器中运行。

演示