How to implement a bidirectional swiping feature to a spinning div using webkitTransform?
===

Trying to implement a bi directional swiping feature( left and right ) to a spinning div which is rotated around Y-axis from 0 to -360 degrees by default( towards left ). I would like to change the spinning direction to right whenever i swipe it towards right. The rotation should start at the place from where my swipe starts. 

I tried to achieve this by calculating the current rotated angle of the div in the following way: 

> var style = window.getComputedStyle(spinner );
var mx = new WebKitCSSMatrix( style.webkitTransform );
var currentAngle = Math.round( (Math.asin( -mx.m13) * 180 / Math.PI ) ); 

Once i get the current rotated angle, i restart my animation by setting this current angle as a value to 0% keyframe rule and 360  to 100% keyframe rule. The same way, i will do it for left side swiping by setting -360 to 100% keyframe rule. 

My code skeleton would be the following:

        

         function tapStart( e ) {  

             // capture the start points   

         }  

         function tapMove( e ) {  

            // capture the current points 

         }
    

        function tapEnd( e ) {  
            // calculate the current angle   
           var angle = calculateRotatedAngle();  

           // determine the direction of the swipe based on the deltaX   
           if( delX > 0 ) {  
               moveRight( angle );  
           }  
           else {    
               moveLeft( angle );  
           }
        }

        function calculateRotatedAngle() {  
            var style = window.getComputedStyle(spinner );  
            var mx = new WebKitCSSMatrix( style.webkitTransform );  
            return Math.round( (Math.asin( -mx.m13) * 180 / Math.PI ) );   
        }  


        function moveRight( angle ) {  
            var keyframes = spinnero.findKeyframesRule("spinnerRt" );  
            keyframes.deleteRule("0%");  
            keyframes.deleteRule("100%");  
            keyframes.insertRule("0% { -webkit-transform: rotateY("+ angle +"deg); }");  
            keyframes.insertRule("100% { -webkit-transform: rotateY( 360deg); }");  
        }  

        function moveLeft( angle ) {  
            var keyframes = spinnero.findKeyframesRule("spinnerLt" );  
            keyframes.deleteRule("0%");  
            keyframes.deleteRule("100%");  
            keyframes.insertRule("0% { -webkit-transform: rotateY("+ angle +"deg); }");  
            keyframes.insertRule("100% { -webkit-transform: rotateY(-360deg); }");  
        }  

I have placed 5 images inside the div at different angles(0, -72, 144, 216 and 288 deg respectively )  around y axis. so as soon as the div starts spinning, the images would also be rotated inside the div along with the div. The user will experience by changing the swiping direction at the touch of any image. 

The above code creates some jerking issue( due to mainly resetting the animation from the beginning ) while swiping right especially when i touch beyond 180 deg in the screen.it happens inconsistently.   

Would like to ensure whether the way i calculate the current angle around Y -axis & the logic to rotate right and left correct or not?? Is there any better way to achieve this bidrecional swiping??




  