Having an issue where I have two functions that both apply a CSS transform to an element using jQuery, but they end up overwriting each other. These functions are called at different times and have no knowledge of each other.
An example showcasing the problem can be viewed here. When you click the "rotate" link, the translation is overridden and only the rotation is applied. Ideally, I would like both transforms to be retained.
I don't believe this is a bug with jQuery, so how can I modify my code to prevent these transformations from conflicting with each other?
box.css({
'-ms-transform': 'translate(50px,100px)', /* IE 9 */
'-webkit-transform': 'translate(50px,100px)', /* Safari */
'transform': 'translate(50px,100px)'
});
rotateIt.on('click', function() {
box.css({
'-ms-transform': 'rotate(45deg)', /* IE 9 */
'-webkit-transform': 'rotate(45deg)', /* Safari */
'transform': 'rotate(45deg)'
});
});