Html 需要在reactjs中使用挂钩进行3D旋转

const ImageSlider = () => {

const [current, setCurrent] = useState(0);
const length = ActiveObject.length;

const nextSlide = () => {
  setCurrent(current === length - 1 ? 0 : current + 1);
};

const prevSlide = () => {
  setCurrent(current === 0 ? length - 1 : current - 1);
};

if (!Array.isArray(ActiveObject) || ActiveObject.length <= 0) {
  return null;
}

return (
  <section className='slider'>
    <FaArrowAltCircleLeft className='left-arrow' onClick={prevSlide} />
    <FaArrowAltCircleRight className='right-arrow' onClick={nextSlide} />
    {ActiveObject.map((slide, index) => {
      return (
        <div
          className={index === current ? 'slide active' : 'slide'}
          key={index}
        >
          {index === current && (
            <img src={slide.Image} alt='travel image' className='image_slide' style={{height:heightstate,width:widthstate,transform:`rotate(${rotation}deg)`,aspectRatio:ratioValue}} />
          )}
        </div>
      );
    })}
  </section>
);
};

.slider {
position: relative;
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
 }
.image_slide {
width: auto;
height: 366px;
border-radius: 10px;
 }
.right-arrow {
position: absolute;
top: 50%;
right: -131px;
font-size: 3rem;
color: #fff;
z-index: 10;
cursor: pointer;
user-select: none;
}
  .left-arrow {
position: absolute;
top: 50%;
left: -131px;
font-size: 3rem;
color: white;
z-index: 10;
cursor: pointer;
user-select: none;
  }