如何用jQuery或js实现3D曲线墙

Posted

技术标签:

【中文标题】如何用jQuery或js实现3D曲线墙【英文标题】:How to realize 3D Curve Wall with jQuery or js 【发布时间】:2012-11-25 05:59:50 【问题描述】:

我想实现的效果只是你可以从下面的网站上看到: http://www.designasaurus.co.uk/page2/page9/page9.html

我真的很想主要使用jQuery/js结合html和css来实现这个效果。我会将这些资源放在我的 android 项目的assets 下,这样我就可以在我的 Android 设备上查看此效果。希望有人能给我一些提示或参考网站来实现它,或者你可以告诉我:嘿,伙计!你无法在你的 Android 项目中实现它。

【问题讨论】:

【参考方案1】:

编辑:Android 浏览器不走运。然而,在 WebGL 之前,我会研究 canvas 的 Transform 方法:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations

从“比例示例”开始

这些应该比 WebGL 更少前沿

/编辑

老实说,我在最新的 CSS3 方面有点落后,但听起来 CSS 转换符合要求。

我想 android 默认浏览器几乎是 Chrome。看起来你可以在这里找到一些关于如何使用 CSS 的线索。请参阅最底部的示例。

http://css3.bradshawenterprises.com/transforms/

但不确定背景图像的流畅度。

要获得更完整的控制,您可能需要研究 webGL,它仍然非常先进,但不比最新的 CSS3 更先进,但 CSS3 可能就是您所需要的。

【讨论】:

实际上,我发现Android默认浏览器(或webview)在2.2或2.3版本上不支持CSS3 transforms 那时我可能需要编辑。这可能在没有 webGL 的 Canvas 中是可行的。 是的! Android 不支持 webGL,也不支持 CSS 3D 变换。我确实有一个想法,我可以用Canvascamera 实现3D Curve Wall,但是只是我有这个想法,我没有给它加注星标的线索。 检查我的编辑。如果它至少不能处理基本的画布变换,我会感到惊讶。 嗯,支持或处理基本的画布变换没有问题。顺便说一句,基本画布的功能可以替换为 jQuery/js 插件。也许我只是误解了你的意思。我只是强调一下,canvas 的 2d 变换可能无法满足我的要求。

以上是关于如何用jQuery或js实现3D曲线墙的主要内容,如果未能解决你的问题,请参考以下文章

如何用js+jquery制作旋转动画?

如何用js或jquery实现点击事件触发键盘

如何用js或jquery实现点击事件触发键盘

如何用java或js或jQuery将打开的网页保存成一个图片

如何用补间动画效果绘制三个 js 线条几何?

如何用javascript或jquery实现图片与二进制的转换