How to do 3D panorama Swiper effect in react? and change transform properties dynamically

Question

image

How can I implement 3D panorama Swiper effect in react? I have done this in react and I have done normal CSS animation for this slider but I don't know how dynamically change these properties

transform: translateX(-50px) translateZ(1.147px) rotateY(150deg);

 <Swiper
          effect={"coverflow"}
          grabCursor={true}
          centeredSlides={true}
          slidesPerView={window.innerWidth < 768 ? 1 : 'auto'}
          spaceBetween={10}
          loop={true}
          // slidesPerView={'auto'}
          coverflowEffect={{
            rotate: 5,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: false,
          }}
        
          pagination={false}
          modules={[EffectCoverflow, Pagination]}
          className="mySwiper"  
        >
            {workData.map((e,index)=>{
                return (
              <SwiperSlide key={index} >
                  <video className="video" width='100%' height='100%'  onMouseOver={event => event.target.play()}  onMouseOut={event => event.target.pause()} loop muted >
                              <source src={e.img} />
                                  </video>
              </SwiperSlide>
                )
            })}
        </Swiper>