如何重新创建Google Zeitgeist 2013中所示的图片库动画？

Question

Google zeitgeist 2013页面显示一个常规的图像网格，并在水平和垂直鼠标拖动移动中重复。它看起来棒极了！

现有的js开放项目有没有和Google zeitgeist 2013做得一样的？

Answer 1

我认为他们正在使用CSS转换来实现这一点。看一下我在浏览Zeitgeist页面时捕获的这段简短的.gif动画，您能注意到transform属性是如何动态更改这些值的吗？我认为它是基于CSS的，但可能有JS在扮演它的角色。

​

​

我还检查了他们的4个JS文件，它们似乎都是Angular JS或Prototype库，而且似乎也涉及到JS，如果你注意到选择器js-detail--searches_grid，这是谷歌的自定义解决方案，所以我不知道有任何类似的实现，但如果你花足够的时间研究它的工作原理，即逆向工程，你也可以创建一个。

我对此做了更多的调查，结果发现它使用的是CSS transform matrix，你可以看起来像here。一开始，这是一件很复杂的事情，但却是非常有益的。矩阵方法接受六个参数，其中包含数学函数，这些函数允许您:旋转、缩放、移动(平移)和倾斜元素。从Google使用的代码中可以明显看出这一点(参见我提供的图像中的6个参数)。