javascript - CSS3 变换：如何撤消变换操作？

Question

我想将翻译转换应用于 a <div>，然后能够将其返回<div>到其原始位置。

对取反值应用相同的操作不会将 DIV 返回到屏幕中的原始位置：

• 应用翻译：-webkit-transform: translate(300px, 400px);

• 不起作用的“撤消”效果：-webkit-transform: translate(-300px, -400px);

我想控制撤消级别，因此重置转换不是一种选择。

Answer 1

我认为您不能将同一变换函数的多个实例应用于一个元素。我认为第二个-webkit-transform:translate();陈述取代了第一个陈述，而不是在它之外采取行动。

-webkit-transform: translate(0, 0);应该将元素返回到其原始（翻译前）位置。看：

• http://jsfiddle.net/pRdTE/

Answer 2

在应用转换之前，您可以保存-webkit-transform. 撤消时只需恢复保存的值。