스크롤에 따라 360도 돌아가게

{/*---App.js-------------------------------*/}
import dollimpanImg from './Images/dollimpan_img.png';
import dollimpanText from './Images/dollimpan_text.png';

function App() {

{/*---돌림판---------------------------------*/}
                <div className="dol-lim-pan">
                    <img src={dollimpanImg} alt="Dollimpan Image" style={{ width: '100%', height: 'auto' }} />
                    <img src={dollimpanText} alt="Dollimpan Text" style={{ width: '100%', height: 'auto', transform: `rotate(${scrollPosition}deg)` }} />
                </div>
                
}

/*mid-part : 돌림판*/

.bottom-part {
  margin-top: 50px;
}

.dol-lim-pan {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.dol-lim-pan img {
  position: absolute;
  width: 100%;
  height: 100%;
}

.dollimpan-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotateText 20s linear infinite; /* 20s 동안 오른쪽으로 무한히 회전하는 애니메이션 설정 */
}

@keyframes rotateText {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

 

스크롤에 따라 움직이는