为网页中的图像添加透视
我有一个方形图像。我需要向其添加透视图,然后制作一个动画,将图像恢复为方形视图。此操作必须至少在所有最新版本的浏览器中都有效并且不支持 Flash。
我尝试按如下方式执行此操作:
- 使用 RaphaelJS 我只能剪辑图像(创建路径并将填充设置为图像网址),而不是添加透视图。
- Canvas 在 RaphaelJS 中用作 svg 和 vml...我无法在它的帮助下添加透视图。
- CSS3 3D动画方法rotateX添加了透视,但仅Chrome和Safary支持。
I have a squared formed image. I need to add perspective view to it and then make an animation that will restore image back to square view. This actions must work at least in all newest versions of browsers and without Flash.
I have tried to do this as follows:
- Using RaphaelJS I can only clip image (create path and set fill to image url), not add perspective.
- Canvas works as svg and vml in RaphaelJS... I can't add perspective with it's help.
- CSS3 3D animation method rotateX adds perspective, but it is supported only by Chrome and Safary.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
无法使用内置工具为图像添加透视效果。
我发现唯一可能的解决方案是使用 SVG add 剪辑路径到图像 - 它不会添加透视图,但它是最好的解决方案。
据我了解 - 我们可以使用 Canvas 添加透视图,但您必须编写自己的 javascript 算法将普通图像转换为透视图。
There is no way to add perspective to image using built in tools.
The only possible solution, I have found is using SVG add clip path to image - it doesn't add perspective view, but it's the best possible solution.
As I understand - we can use Canvas to add perspective, but you must write your own javascript algorithm to transform plain image to perspective view.