变换：以高于 360 度或低于 0 度的值旋转
Transform: rotate with values above 360deg, or below 0deg
我正在尝试使用 transform: rotate() 旋转显示风向的箭头。
我从 api-fetch 中获取以度为单位的值，测量风向的标准方法是测量风的来源，我的箭头需要指向相反的方向正确显示风流。
style={{transform: `rotate(${weatherData.parameters.wd.values}deg)`}}
我尝试过将“+180”加到我的值上，但是当值大于 360 度时，这就不起作用了。
有什么想法吗？
首先，欢迎来到stack overflow。现在我能想到的最好的办法是在css中使用“flip/mirror”转换函数，这是一个简单的反向比例。
transform: scale(-1, -1)
此代码应水平和垂直翻转该分区内的任何内容，例如，如果您有一个指向 90° 的箭头，它只会水平翻转它，不会做任何事情，而垂直翻转，指向-90°。
所以你的代码应该是这样的：
style={{transform: `rotate(${weatherData.parameters.wd.values}deg) scale(-1, -1)`}}
您肯定需要 css 中的一些修复，因为缩放功能可能会在最终结果的视图中制动某些东西，但如果您有对称箭头，一切都应该没问题。如果您在这方面需要帮助，请尽管提出！
我正在尝试使用 transform: rotate() 旋转显示风向的箭头。
我从 api-fetch 中获取以度为单位的值，测量风向的标准方法是测量风的来源，我的箭头需要指向相反的方向正确显示风流。
style={{transform: `rotate(${weatherData.parameters.wd.values}deg)`}}
我尝试过将“+180”加到我的值上，但是当值大于 360 度时，这就不起作用了。
有什么想法吗？
首先，欢迎来到stack overflow。现在我能想到的最好的办法是在css中使用“flip/mirror”转换函数，这是一个简单的反向比例。
transform: scale(-1, -1)
此代码应水平和垂直翻转该分区内的任何内容，例如，如果您有一个指向 90° 的箭头，它只会水平翻转它，不会做任何事情，而垂直翻转，指向-90°。 所以你的代码应该是这样的：
style={{transform: `rotate(${weatherData.parameters.wd.values}deg) scale(-1, -1)`}}
您肯定需要 css 中的一些修复，因为缩放功能可能会在最终结果的视图中制动某些东西，但如果您有对称箭头，一切都应该没问题。如果您在这方面需要帮助，请尽管提出！