Javascript 使用内嵌样式基于滚动值旋转图像

我试着用position:fixed来旋转一个图像，我用它来模拟背景图像，唯一的问题是我想让它根据所使用的图片在页面上向下滚动的程度，按照某个方向旋转。到目前为止，一切似乎都正常，每当我向下滚动时，我的状态都会得到更新，从而触发组件的重新渲染

内联样式是我唯一似乎无法理解的东西。代码如下：

（此外，图像的大小似乎不起作用，因为它总是占用相同的空间量（完整的父div））

---

根据用户的建议，并在文档中显示，旋转（ndeg）功能需要有测量单位“度”。

应用旋转角度功能时。如果按如下所示更新样式，则应解决此问题：

<img style={
   {  
     transform: `rotate(${this.state.rotate}deg)`, 
     transformOrigin:'right top'}
   } 
   className={classes.BluePowder} 
   src={bluePowder} 
   alt='BackgroundImage' />

---

谢谢！我看了文件，然后修改了很多次，结果弄丢了。现在正在按预期工作，谢谢！

.BluePowder {
position: fixed;
top: 0;
left:-10%;
z-index: 1;
}    

.BluePowder img {
height: 700px;
}

<img style={
   {  
     transform: `rotate(${this.state.rotate}deg)`, 
     transformOrigin:'right top'}
   } 
   className={classes.BluePowder} 
   src={bluePowder} 
   alt='BackgroundImage' />