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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With