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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -