I have been working on rather simple webkit transforms to create (layman's) animations. I'm doing pretty good except for one issue, on which I'm yet to find some info. Here goes:
Description: I have a rectangular div, that I rotate by 90 degrees, using target.style.webkitTransform += 'rotateZ(90deg)'; which is fine - and I translate it using target.style.webkitTransform += 'translate3d(50px, 0px, 0px)';
Problem: When you rotate, the axis of the element also rotates and if you translate (for example) in x-axis, the object will move in the new direction (that the element is facing towards) e.g. 50 px downwards in the example above (after the rotation).
I need a way to recalculate/reset the axis (without changing the rotation) so that the animation makes sense for a lay man i.e. For programmers it's easy to see that the object is facing in a different direction but for non-techie user left will always remain left.
The requirement: When the user says move it 50px on x-axis it should move 50px on x-axis (for the user) regardless of rotation or any other transform applied to it beforehand.
Further: I'll not know in advance how the user will manipulate an object hence I can't take fixed values and work around them, hence the need for a formula to recalculate/reset everything given the object's style properties and construct further transforms.
