javascript - Rotating an image based on scroll value with inline style ReactJS - Stack Overflow

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

Share Improve this question Follow edited Aug 30, 2019 at 23:18 Dacre Denny 30.4k55 gold badges5151 silver badges6666 bronze badges asked Aug 29, 2019 at 21:14 Niccolò DianaNiccolò Diana 15922 silver badges1313 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.