Question

        var transform = ['scale(' + scale + ')'];
        $.merge(transform, ['rotate(' + rotate + 'deg)']);
        $(this).css(-moz-transform, transform.join(' '));

this block of code executes when an event is generated , the new scaling and rotation is added to css element,but whenever the same event is generated again the css element resets itself to the original size and position .The transformation is carried out after resetting during the second time.I want to eliminate the resetting of the element to original size and position.How can i make the change permanent in the first time when event is fired ,and build on it when the event is fired the second time?
Please help thanks in advance

Answer 1

There’s nothing wrong with this code, but keep in mind you’re setting scale and rotate in absolute terms, not relative to its ‘initial’ state.

So each time this code executes, the -moz-transform property of your element is being overwritten. If you want to rotate and scale it based on it’s current state, you’ll have to keep track of your scale and rotate values and adjust them as necessary. e.g., if this code is in a loop, you can do rotate=rotate+5; or something like that.

You can also request these properties from the CSS using ($this).css('-moz-transform'), parse that to get the values you want, and update scale and rotate accordingly.