一般的平面效果，通过改变水平和垂直坐标就能实现，再加上深度，就能在视觉上的产生3D（三维）的效果。程序就是模拟这样一个三维空间，里面的图片会根据三维坐标显示在这个空间。
很久以前就看过一个3DRoom效果，是用复杂的计算实现的。在上一篇图片变换研究过css3的transform之后，就想到一个更简单的方法来实现。
　　兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0

　　实现原理

　　3D效果的关键，是深度的实现。把3D容器看成一个由多个不同深度的层组成的空间，这些层的尺寸默认跟容器一样。层里面放了该深度的图片，并且各个层会根据深度的变化做缩放变换，从视觉上产生深度差。缩放变换的比例按照最近点为1，最远点为0，逐渐变化。关键的地方是层里面图片的尺寸和坐标必须跟着层同时变换，这个通过css3的transform很简单就能实现。这样图片只需设置好尺寸再相对层定好位就行了，避免了随深度变化要不断调整图片尺寸和定位的麻烦。
　　图片加载

　　在程序初始化之后，就可以调用add方法来添加图片。add方法有两个参数：图片地址和参数对象，还会返回一个图片操作对象。操作对象包含以下属性和方法，方便对图片进行操作：
　　img: 图片元素
　　src: 图片地址
　　options: 参数对象
　　show: 显示图片方法
　　remove: 移除图片方法
　　其中options可以设置如下属性：
　　属性:    默认值//说明
　　x:  0,//水平位移
　　y:  0,//垂直位移
　　z:  0,//深度
　　width: 0,//宽度
　　height: 0,//高度
　　scaleW: 1,//宽度缩放比例
　　scaleH: 1//高度缩放比例
　　其中x、y分别是水平和垂直坐标的位移参数，坐标原点在容器底部中间，水平坐标向右，纵坐标向上，单位是px。而z是深度，用于比例的计算，方向由近点到原点。
　　坐标系如下图：
　　图片加载成功后，就会执行_load图片加载程序。首先根据参数设置图片样式：

layer = document.createElement("div");
layer.style.cssText = "position:absolute;border:0;padding:0;margin:0;left:0;top:0;visibility:hidden;background:transparent;width:" + this._clientWidth + "px;height:" + this._clientHeight + "px;";        

        

        
        
      
        
it知识库：JavaScript 图片3D展示空间（3DRoom），转载需保留来源！
        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。