我必须解析一个 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 Canvas 创建图像和缩放的倾斜反射?这是一款专为 iPad 设计的网络应用程序,因此浏览器与 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"));
});
CSS:
.imgCopy { -webkit-transform:scale(.26) skew(-1deg);
我对此进行了测试,它可以在 iPad 的 iOS 模拟器中运行。
关于javascript - 在 HTML 中创建倾斜缩放反射的方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8304644/