Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to calculate rotation angle of closest pane in carousel

Tags:

javascript

I have this carousel which rotates in 3D with the use of -webkit-transform: rotateX(rotation in deg);. It has 10 panes which means every 36deg there is a pane centered.

Now, I'm trying to create a "snap to" effect called on a touchend event, setting the closest pane centered flat in front.

My problem is, from an arbitrary rotation value, say -1820 deg, how do I calculate which pane, or rather, at what degree is the closest pane?

Hope that makes sense. A hint would be much appreciated.

like image 271
jenswirf Avatar asked Oct 08 '22 14:10

jenswirf


1 Answers

If I understod well your question, you should use the modulus operator, which is basically the division remainder, which according to wg3schools is defined as the percentage sign %.

Example: 5%2 is equal to 1

In your case you could do semthing like

 var initialAngle= getAngle();  //let's say it's 1820 
 var closestPane= initialAngle%36; //which gives you 20.

So now you know the position of your angle resepct to the previous angle (let's call it A). If you make an additional simple operation (36-20=16) you also know the distance from the following angle.

angle before ---- A ---- angle after
            20deg   16deg

Hope this helps

like image 134
Daniele B Avatar answered Oct 13 '22 11:10

Daniele B