jQuery device orientation range converting to percentage between 0 and 100

I'm trying to control an HTML element by using the gyroscope in my smartphone. I managed to extract the gyroscope's values (Alpha, Beta and Gamma) but can't manage to translate it in such a way it's able to manipulate objects the way I'd like to.

The starting position of the device is in landscape mode, right in front of the user; just like a flatscreen television. The device will be inserted in a Google Cardboard viewer.

The attached image explains what I am trying to achieve.

1. An objects "Left" percentage in CSS.
2. Device orientation while rotating head from left to right

I can't seem to find a way to "convert" the range of the rotaion movement to a percentage value between 0 and 100%.

For example:

• If I look slightly left, the Alpha value is around 22/23 and the left percentage should be around 25.
• If I look slightly right, the Alpha value is around 338/337 and the left percentage should be around 75.

Could you guys help me out?

Best regards,

Peter