在 Android Web 应用程序中实现 coverflow UI
我正在尝试使用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果您正在寻找不使用 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