实现一个3D的拖拽滚轮事件。
完成第一个效果，Grid层叠式布局。（5 5 5的布局，共计125张图片）。
确定其中要点，提取共同部分，拖拽与滚轮事件（考虑火狐兼容）。
由于是3D效果，抛弃图片的定位，以及外边距等控制图片位置，选择transform3D。
因此我第一时间考虑的是空间坐标系，确立每个图片的空间坐标，确定中心图片，计算每个图片与中心图片的坐标差值，在确定间距，效果实现。
对于transform是先旋转后位移，还是先位移后旋转，经过调试，确定我们想要的效果，是先位移后旋转。
首先是进场动画的制作，因为开始进场图片的排列是无规则的，只需要设置图片translate3D各项数据的随机数即可。
对于产生变换的动画效果，借由transition配合cubic-bezier速度曲线完成。
鼠标的拖拽会产生一个惯性，即鼠标松开后，图片仍然会向你拖拽的方向移动一段距离，取决于你拖拽的速度。
这边我们联系打点计时器的原理，即计算当前鼠标位置和上一次鼠标记录位置的差值，配合定时器完成。
螺旋式布局的制作，想象由y轴中心呈圆柱状的125张图片，以z轴向外扩散一段距离，形成一个圆圈，确定中心图片，再将这个圆圈中的图片以y轴进行平移。
这一次完成球状布局的制作。
首先思路，确定自上而下的分层（不规则摆放更好看），比如第0层1个，第1层3个，以此类推，共计13层（实际是14层）。
首先只考虑“赤道”状摆放，不考虑y轴方向的位移，for循环遍历每张图片，确定每张图片属于第几层第几个。
第一种肯定是考虑圆心点的计算，点到面的距离，然而太复杂，放弃。
所以另一种方法rotateX，比如第一张图片是翻转90度，而最后一张翻转-90度。
计算方法rotateX(${90-numC*xDeg}deg)
numC:第几层，xDeg = 180/（层数=13）
元素周期表布局以及图片点击弹窗事件。
元算周期表前18张图片，参照元素周期表，直接以左上角为坐标原点，直接列出这18张的坐标数组存放，后107张则按照没行18张计算。
然后考虑中心图片，计算坐标差值，在乘上自定的x轴，y轴方向的间距。
由于每次点击图形切换都会重新计算，考虑优化，将计算的结果数组存放，只需判断数组是否存在即可，无需重复计算。
图片点击事件有时间委托完成，动画效果直接用js完成，点击图片正面弹出，点击图片以外则翻转消失。
利用iframe框架，引入新的效果（3d相册拖拽），将数据通过json数组方式存放至data.js中。
这样以后就可以无限增加新的案例，并通过点击弹出层的方式，实行案例的展示。