HTML/Javascript Element Rotation

Question

I have an element that I have setup to represent a speedometer. It has a background element which has the actual image of the gauge, and I also have a "needle" element that overlays it and I change its transform rotate property based on a variable value.

I have determined that the range of the needle movement to match the speedometer is -132 degrees to 132 degrees.

The range of the variable is 0 to 100. So the end result I want is at a value of 0, I want the gauge dial to rotate -132 and at 50, I want it to rotate 0, and so on....

I've read other threads showing how to scale (-132 <> 132) to (0 <> 100), although I'm not sure if I'm doing it right.

I've also read how to take my variable * Math.PI/180 to determine the rotation...

Unfortunately, my end result is not even close to being right.

Could someone describe the correct process to achieve what I'm looking for?

Any help would be appreciated!

Answer 1

Is this a math question?

If so, you just have to apply: vel*2.64-132 . No need to transform to degrees because it's already in degrees (if you range -132<> 132 was originally in degrees). Just remeber to specify it's degrees with deg .

If you want more information about rotation units you can look at the specs here .