Transform: rotate with values above 360deg, or below 0deg

Question

I am trying to rotate an arrow that shows the wind direction with transform: rotate().

I get the value in degrees from an api-fetch, and the standard way of measuring wind direction is to measure the way the wind comes from, and my arrow needs to point at the opposite direction to properly show the wind flow.

style={{transform: `rotate(${weatherData.parameters.wd.values}deg)`}}

What I've tried is adding "+180" to my value, but that doesn't work right when the value becomes greater then 360degrees.

Any ideas?

Answer 1

first of all, welcome to stack overflow. Right now the best thing that I can think of is to use the "flip/mirror" transform function in css, wich is simple a reversed scale.

transform: scale(-1, -1)

This code should flip anything inside that division horizzontaly and vertically, so for example, if you have an arrow pointing at 90°, it will simply flip it horizzontally, wich will not do anything, and vertically, pointing it at -90°. So your code should look like:

style={{transform: `rotate(${weatherData.parameters.wd.values}deg) scale(-1, -1)`}}

You will need for sure some fixes in the css, since the scale function could brake something in the view of the end result, but if you have a symmetrical arrow, everything should be fine. If you need some help with that just ask!