javascript - 使用内联样式ReactJS基于滚动值旋转图像

我正在尝试旋转具有position：fixed的图像，用于模拟背景图像，唯一的事情是我希望它根据某个用户向下滚动页面的方向沿某个方向旋转。到目前为止，一切似乎都正常，每当向下滚动时，状态都会更新，从而触发组件的重新渲染。

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

（图像的大小似乎也不起作用，因为它总是占据相同的空间量（全父div））。

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

每次滚动时，元素this.state.rotate都会正确更新。

CSS：

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

.BluePowder img {
height: 700px;
}

最佳答案

当对旋转角度应用rotate()函数the deg unit is required时。如果按如下所示更新样式，则可以解决此问题：

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