使用jquery制作3d效果

时间:2013-01-30 11:09:39

标签: javascript jquery html5 css3 3d

当我在网上冲浪时,我看到了这一点:http://www.enter-the-void.co.uk/#/menu 你有没有想过用jquery / html5制作这个?

提前谢谢。

编辑:

最后我认为最好的方法是使用这种方法:

  • 创建一个容器div,其高度为100%,宽度为每个示例1200px
  • 在此容器上创建并修复许多小div
  • 使用jQuery获取鼠标位置并向右或向左移动容器div
  • 当容器移动时,使用CSS 3D变换在小div上添加“透视”样式

您怎么看?

4 个答案:

答案 0 :(得分:1)

在我的头顶,Three.js可以帮助你。它是一个用于渲染3D对象的JavaScript库。我猜对象本身不会太难;一堆带有自定义纹理的平面。但是相机可能更难完成。

答案 1 :(得分:1)

显然,有几种创造性的方法可以解决这个问题。但是,截至目前,没有任何浏览器本身支持3D渲染。但是,webkit,opera和mozilla支持 2d渲染

这意味着通过 javascript和css ,您可以创建3d的外观。但除了已经提到的(WebGL,three.js库,画布技巧)之外,没有浏览器支持3d渲染。

阅读关于此事的一年之久的博文:Simple '3D' Rendering With CSS3 and Javascript

答案 2 :(得分:0)

您可以使用Webgl或画布来制作此效果

答案 3 :(得分:0)

就像rory mccrossan在评论中所说的那样。

检查jquery视差,这正是在虚拟网站上发生的事情。

将你的div放在不同的视差层上,看看神奇的发生; - )

http://stephband.info/jparallax/

https://github.com/IanLunn/jQuery-Parallax

http://www.sequencejs.com/themes/sliding-horizontal-parallax/