如何使用css转换重新创建我的jQuery .animate（）元素zoom / pan？

Question

我把一个jsFiddle放在一起来说明我的问题：

http://jsfiddle.net/VbCcA/3/

我有一个平移和缩放到指定元素的函数。这用于在漫画书中创建帧之间的过渡。

我使用jQuery的.animate（）可以正常工作，但我想在可用时使用css转换，因为它们在现代浏览器上表现得更好。

但是我似乎无法正确地重新创建相同的行为。

不是在这里描述得不好，如果你看一下jsFiddle，你会看到两组控件，每个按钮对应一个“漫画”中的一个框架。 jQuery动画控件的行为正确，而css变换控件则没有。

问题似乎是在使用css-transforms缩放元素后测量offset（）属性。

非常感谢任何帮助。

注意：当将方法从.animate切换到变换时，您将需要'重新运行'jsFiddle，反之亦然，以便重置在函数运行时修改的CSS。

编辑：我刚刚更正了jSfiddle的链接...向那些已经查看过的人道歉。原始链接缺少示例代码的一部分。另外，为了澄清，我需要使用基于百分比的值，因为整个应用程序都是完全响应的。

Answer 1

这肯定不是最直接的路线，但考虑将jQuery Transit（http://ricostacruz.com/jquery.transit/）应用到您的.animate版本，只是为了看看它如何处理转换为CSS3转换。然后你可以从那里向后工作。