本文展示了如何使用jQuery和CSS 3D transforms构建一个模拟真实空间的艺术品展示画廊，参观者可以沿着四面墙浏览并3D旋转到下一面墙。每个艺术品都有详细的说明，支持在Chrome或Firefox等支持CSS 3D transforms的浏览器中查看。通过调整布局参数，可以定制每面墙上的图片数量。
这是一个模拟现实观看艺术品展厅的效果：所有的艺术品分别挂在房间里的4面墙上，参观者沿着每一面墙循环观看墙上的艺术品。这种奇妙的效果将通过jQuery和CSS 3D transforms来实现。每一面墙都有一个“尽头”，当参观者“走”到尽头的时候，画面开始3d旋转，转到下一面墙。每一幅艺术品都带有一个很小的说明框，点击它后会弹出图片的完整说明。
注意：不是每一个浏览器都支持CSS 3D transforms，最好是使用Chrome或Firefox浏览器观看。建议使用Chrome浏览器观看。
HTML结构:
html的初始结构使用一个class为gr-main的div包住一些figure，每个figure用于存放图片和它的说明信息。
Penn. Station, Madison Square Garden and Empire State Building
New York City, 2009, by Thomas Claveirole
在代码运行时我们需要将html结构转换为以下结构，它在“房间”中包含一面“主墙”。
prev
最低0.47元/天 解锁文章
扫一扫
852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
