在我的html文档中，有一些瓷砖有两张图片（一个jpg作为背景，一个png，透明度作为前景）并具有悬停效果： 在您正在悬停的当前图块上，图像会在鼠标所在的位置进行缩放，并且前图像会从光标移开。
在仅水平移动光标的同时，所有垂直图片也会被动画化，反之亦然。
以下是所有html，javascript和css的示例：
http://jsfiddle.net/Lmcn0sxw/6/
效果正常（有一些错误，但这并不重要）。
可以使用javascript和transform3d轻松添加动画，其中item是当前具有类.item的图块。
像topRatioFron这样的变量是根据相对于当前图块的当前鼠标位置计算的。
item.find('.front').css('transform', 'translate3d(0,' + topRatioFront + 'px,0)');
item.find('.back').css('transform', 'translate3d(0,' + topRatioBack + 'px,0)');
您可以在jsfiddle javascript代码中看到一些变体。
主平铺通过matrix3d效果进行动画处理：
self.find(itemClass).css(
'transform',
'matrix3d(1,0,0.00,' + leftRatio + ',0.00,1,0.00,' + topRatio + ',0,0,1,0,0,0,0,1)'
);
在Linux Mint上的Google Chrome浏览器中，它运行良好。在Windows上的Google Chrome上，它也有效。在Mozilla Firefox中，它并不像谷歌Chrome一样完美，但它没关系。
一位朋友在使用Safari的Mac上打开了这个网站，所有的动画都非常迟钝（看起来好像在颤抖）。另一位朋友在Chrome浏览器的Mac上打开了它，它也在摇晃，但这次不在Safari中。
我如何测试或找出导致这种情况的原因？它不能是他们使用的计算机的性能，因为具有相同效果的this site在所有浏览器中都能正常工作，无论操作系统如何。
首先，我使用translate代替translate3d（我读到后者更快），但它没有帮助。
我后来添加了一个名为requestAnimationFrame的函数，它可以帮助渲染动画。结果是一样的。
在Safari上（我用v8.0.7试过），matrix3d转换工作，但所有其他转换都不起作用，不在当前磁贴上而不在其他转换上，但是CanIUse告诉我transform3d Safari 8支持。当我使用matrix3d变换检查项目时，我可以在更新的DOM树中看到它，但是.back或.front中的所有元素，我都看不到transform3d添加了，我不知道如何解决这个问题。
答案 0 :(得分：1)
我相信这是你滞后的原因 - offset = self.offset()。
在每个帧上查询DOM，这会强制它渲染布局，并导致口吃。
而是在动画开始之前读取偏移量。
您还可以在动画开始之前添加到每个元素 - 更改：转换。