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 ponent.

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;
}

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 ponent.

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;
}

• javascript
• css
• reactjs

• Thank you! I read the docs and then modified it so many times that it has gotten lost. Working as expected now, thanks! – Niccolò Diana Commented Aug 29, 2019 at 21:21

2 Answers 2

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' />

As kindly suggested by an user, and present in the docs, the rotate(ndeg) func needs to have the unit of measurament 'deg' afterwards.