在 Android Web 应用程序中实现 coverflow UI

发布于 2024-10-11 05:42:39 字数 316 浏览 6 评论 0原文

我正在尝试使用 HTML、CSS、JavaScript 和一些图像在 Android Web 应用程序上构建 coverflow UI。

CSS 3D 变换自 2009 年起在 Safari 中受支持,在 iPhone 2.0 版后受支持,但在 Android 上支持不佳。更糟糕的是,Android 2.1 和 Android 2.2 上的实现都存在错误,并且每个版本的方式都不同。

知道如何使用 HTML、CSS、JavaScript 和一些图像(无需 CSS 3D 转换)在 Android Web 应用程序上构建 coverflow UI?

I am trying to build a coverflow UI on an Android web application using HTML,CSS, JavaScript and some images.

CSS 3D transforms, which are supported in Safari sine 2009 and on the iPhone since version 2.0, is not supported well on the Android. worse then that, the implementation is buggy on Android 2.1 and Android 2.2, and in each version in a different way.

Any idea how can I build a coverflow UI on an Android web application using HTML,CSS, JavaScript and some images without CSS 3D transforms?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

请止步禁区 2024-10-18 05:42:39

如果您正在寻找不使用 CSS 3D 或插件的纹理 3D 转换,那么 Canvas 就是您的最佳选择,它是大多数尖端浏览器中存在的 HTML 元素。已经有 3D 库利用了这一点,例如 K3D

另一方面,您可以使用动态 HTML 和不同角度的预渲染图像。对于没有旋转的 3D 效果,只需实现一个基本的 3D 渲染公式,例如:

点在屏幕上的 X 位置 = 位置 X(以像素为单位)/距离 + 屏幕宽度的一半 点

在屏幕上的 Y 位置 = 位置 Y像素/距离+屏幕高度的一半

If you're looking for textured 3D transformations without the use of CSS 3D or plugins, look no further than Canvas, the HTML element present on most cutting-edge browsers. There are already 3D libraries that take advantage of this, like K3D.

On the flip side, you can use dynamic HTML and pre-rendered images at different angles. For a 3D effect without rotations, simply implement a basic 3D rendering formula, such as this one:

Point's X position on the screen = position X in pixels / distance away + half of the screen width

Point's Y position on the screen = position Y in pixels / distance away + half of the screen height

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文