Rotating an image based on scroll value with inline style ReactJS

Question

I'm trying to rotate an image with position:fixed, which I'm using to mimic a background image, only thing is that I want it to rotate according in some direction depending on how much the used has scrolled down the page. So far everything seems to work, my state gets update whenever i scroll down, hence triggering a re-render of the component.

The inline style is the only thing that I can't seem to understand. Code below:

(Also the sizing of the image does not seem to work, since it occupies always the same amount of space (full parent div)).

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

The element this.state.rotate gets updated correctly at each scroll.

CSS:

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

.BluePowder img {
height: 700px;
}

Answer 1

When applying the rotate() function the deg unit is required for the rotation angle. If you update the style as shown below this should resolve the issue:

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