jquery - CSS transform gets overwritten -
i facing following problem:
i have 2 functions apply css transform element (with jquery), without knowing eachother , called @ different times.
however both overwrite eachother.
an example can found here. when click rotate link, translate overwritten , rotation applyed. keep both transforms.
i assume not jquery bug, how make work not overwrite eachother ?
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)' }); });
you overwriting transform property other if both classes of same element.
to use both transform rotate
, translate
can this
yourselector{ transform: rotate(45deg) translate(50px,100px); }
and in case try this
rotateit.on('click', function() { box.css({ '-ms-transform': 'rotate(45deg)', /* ie 9 */ '-webkit-transform': 'rotate(45deg)', /* safari */ 'transform': 'translate(50px,100px) rotate(45deg)' }); });
Comments
Post a Comment