Question

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

我需要创建一个img，其反射并且只有它的反射而不是图像有一个偏斜＆amp;缩放。这意味着我不能去：

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

你能否提出一种最有效的方法/技巧？创建缩放和放大的最简单方法倾斜反映img元素？

其中哪一项最好（尽管如果你有更好的想法，我很乐意听到它们:)）：
- 在实际图像下方创建另一个HTML img，然后调整其样式以使其颠倒，缩放和放大歪斜。
- 使用服务器端语言（C＃）将反射创建为.png
- 使用CSS3技术/我不知道的方式？
- 使用HTML5画布创建图像和图像。缩放的反射？这是一款适用于iPad的网络应用程序，所以它与浏览器-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模拟器中运行。

Demo

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

1 个答案: