I am trying to create a card that rotates 180 degrees and displays another part of the information when it is clicked. However, it does rotate the shape but text are also rotated 180 degree thus it becomes unreadable.

{flip?(<motion.div onClick={()=>{setFlip(!flip)}}
            initial={{
              rotateY:-180
            }}
            animate={{
              rotateY:0
            }}
            whileHover={{scale:1.2}}
           className='card flex flex-col justify-evenly w-3/4 h-max bg-gradient-to-br from-gray-100 to-transparent rounded-l-xl rounded-r-xl shadow-xl z-10 border py-2 px-5 items-center overflow-hidden'>
            <div className="items-center"><img className="border rounded-full w-3/4 mx-auto" src="/myimage.jpeg"></img></div>
            <div className='pt-5'><h1 className="font-semibold">John Doe</h1></div>
            <div><p>SOME BIG DESCRIPTION</p></div>
          </motion.div>):(<motion.div onClick={()=>{setFlip(!flip)}}
            whileHover={{scale:1.2}}
            initial={{
              rotateY:0
            }}
            animate={{
              rotateY:180
              
            }}
            className='card flex flex-col justify-evenly w-3/4 h-max bg-gradient-to-br from-gray-100 to-transparent rounded-l-xl rounded-r-xl shadow-xl z-10 border py-2 px-5 items-center overflow-hidden '>
            <div className="items-center"><img className="border rounded-full w-3/4 mx-auto" src="/myimage.jpeg"></img></div>
            <div className='pt-5'><h1 className="font-semibold">Rotated John Doe</h1></div>
            <div><p>Some Information</p></div>
          </motion.div>)
          
          }