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