CSS3 rotate3d with two angles -


i rotating cube based on mouse position.

the mouse has x co-ordinate , y co-ordinate on screen @ time.

i using jquery .mousemove() determine pixel co-ordinates, , inside mousemove function, adjusting css rotate3d angle move object.

this working fine, move object based on x , y positions. ideally so..

'-webkit-transform': 'rotate3d(1,0,0,'+anglex+'deg)', '-webkit-transform': 'rotate3d(0,1,0,'+angley+'deg)', 

but doesn't work of course.

how both axis rotate different amounts @ same time?

you can combine transforms. sum represented matrix3d function. not sure want achieve, in case second transition overrides first one. try:

'-webkit-transform': 'rotate3d(1,0,0,'+anglex+'deg)' + 'rotate3d(0,1,0,'+angley+'deg)' 

this can problably represented 1 transform if tweak [1,0,0] vector/axes


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -