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

Posted 2023-05-07

【中文标题】如何用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 变换。我确实有一个想法，我可以用Canvas 和camera 实现3D Curve Wall，但是只是我有这个想法，我没有给它加注星标的线索。

检查我的编辑。如果它至少不能处理基本的画布变换，我会感到惊讶。

嗯，支持或处理基本的画布变换没有问题。顺便说一句，基本画布的功能可以替换为 jQuery/js 插件。也许我只是误解了你的意思。我只是强调一下，canvas 的 2d 变换可能无法满足我的要求。