JavaScript 图片3D展示空间(3DRoom)
一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果。 程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间。 很久以前就看过一个 3DRoom 效果,是用复杂的计算实现的。 在上一篇 图片变换 研究过css3的transform之后,就想到一个更简单的方法来实现。 兼容:ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 中秋将至,预祝各位中秋快乐,团团圆圆! 效果预览 //--> //--> */ /*--> */ 默认模式 css3 zoom base 不旋转 30度 -30度 //--> */ /*--> */ 3DRoom //--> 程序说明 【实现原理】 3D效果的关键,是深度的实现。 把3D容器看成一个由多个不同深度的层组成的空间,这些层的尺寸默认跟容器一样。 层里面放了该深度的图片,并且各个层会根据深度的变化做缩放变换,从视觉上产生深度差。 缩放变换的比例按照最近点为1,最远点为0,逐渐变化。 关键的地方是层里面图片的尺寸和坐标必须跟着层同时变换,这个通过css3的transform很简单就能实现。 这样图片只需设置好尺寸再相对层定好位就行了,避免了随深度变化要不断调整图片尺寸和定位的麻烦。 【图片加载】 在程序初始化之后