如何重新创建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但这是Google的自定义解决方案，因此我不知道有任何类似的实现，但是如果您花足够的时间研究它的工作原理，即逆向工程，那么您也可以创建一个。

我对此进行了更多研究，结果发现它使用的是CSS transform matrix ，您可以在此处查看 。 一开始要理解是一件很复杂的事情，但是却很有收获。 矩阵方法采用六个参数，其中包含数学函数，这些参数使您可以：旋转，缩放，移动（平移）和倾斜元素。 从Google使用的代码可以明显看出这一点（请参阅我提供的图像中的6个参数）。