Estoy tratando de rotar una flecha que muestra la dirección del viento con transformar: rotar ().
Obtengo el valor en grados de un api-fetch, y la forma estándar de medir la dirección del viento es medir la forma en que proviene el viento, y mi flecha debe apuntar en la dirección opuesta para mostrar correctamente el flujo del viento.
style={{transform: `rotate(${weatherData.parameters.wd.values}deg)`}}
Lo que he intentado es agregar "+180" a mi valor, pero eso no funciona bien cuando el valor supera los 360 grados.
¿Algunas ideas?
en primer lugar, bienvenido al desbordamiento de pila. En este momento, lo mejor que se me ocurre es usar la función de transformación "flip/mirror" en css, que es simplemente una escala invertida.
transform: scale(-1, -1)Este código debería voltear cualquier cosa dentro de esa división horizontal y verticalmente, por ejemplo, si tiene una flecha que apunta a 90 °, simplemente la volteará horizontalmente, lo que no hará nada, y verticalmente, apuntándola a -90 °. Entonces su código debería verse así:
style={{transform: `rotate(${weatherData.parameters.wd.values}deg) scale(-1, -1)`}}Seguramente necesitará algunas correcciones en el css, ya que la función de escala podría frenar algo en la vista del resultado final, pero si tiene una flecha simétrica, todo debería estar bien. Si necesita ayuda con eso, ¡solo pregunte!