CSS3 transforms: how to undo a transform operation?

Question

I want to apply a translate transformation to a <div>, and then be able to return that <div> to its original place.

Applying the same operation with negated values doesn't return the DIV to the original place in the screen:

• Applied translation: -webkit-transform: translate(300px, 400px);

• The "undo" effect that is not working: -webkit-transform: translate(-300px, -400px);

I want to control the undo levels, so reseting the transforms is not an option.

Answer 1

I don’t think you can apply multiple instances of the same transform function to an element. I think the second -webkit-transform:translate(); statement replaces the first, rather than acting in addition to it.

-webkit-transform: translate(0, 0); should return the element to its original (pre-translation) position. See:

• http://jsfiddle.net/pRdTE/

Answer 2

Before applying transform you could save the current value of -webkit-transform. When undoing just restore the saved value.