文章/答案/技术大牛

发布

社区首页 >问答首页 >在HTML中创建倾斜缩放反射的方法

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

Stack Overflow用户

提问于 2011-11-29 01:17:28

回答 1查看 426关注 0票数 3

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

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

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

您能建议一种最有效和最简单的方法来创建img元素的缩放和倾斜反射吗？

其中哪一个最好(尽管你有更好的想法，我很想听听：)：

在实际图像下面创建另一个HTML，然后调整其样式，使其颠倒、缩放和倾斜。
使用服务器端语言(C#)将反射创建为.png
使用我不知道的CSS3技术/方式？
使用HTML5画布创建两个图像&缩放的倾斜反射？这是一个仅针对iPad的web应用程序，所以浏览器-HTML5 5的兼容性并不重要。

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

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

html

css

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2011-11-29 04:02:10

jQuery：

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

CSS：

.imgCopy { -webkit-transform:scale(.26) skew(-1deg); }

我对此进行了测试，它在iOS模拟器中与iPad一起工作。

演示

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/8304644

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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