Estoy tratando de crear una tarjeta que gire 180 grados y muestre otra parte de la información cuando se haga clic en ella. Sin embargo, gira la forma, pero el texto también se gira 180 grados, por lo que se vuelve ilegible.

 {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>) }