你好，我正试图与CSS程序卡，旋转时，点击和内容的变化，在旋转。但是，内容在旋转后会发生变化。如何在旋转过程中更改内容。
我试着将Map旋转到90度，改变内容，然后从90度旋转回0度。但我不知道该怎么做。
下面是代码

const [isCardTurned, setIsCardTurned] = useState(false)
    const animationInterval = useRef();
    const cardContainerRef = useRef();

  function turnCard(e) {

        cardContainerRef.current.style.transition = "1s";
        cardContainerRef.current.style.transform = "rotateY(90deg)";
        animationInterval.current = setInterval(() => {
            setIsCardTurned((prevState) => { return !prevState })
        }, 1000);
    

    }

    useEffect(() => {
        cardContainerRef.current.style.transition = "1s";
        cardContainerRef.current.style.transform = "rotateY(0deg)";
        clearInterval(animationInterval.current)

    }, [isCardTurned])

    return (
        <>
            {isCardTurned == false &&
                <>
                    <div className="cardContainer" onClick={turnCard} ref={cardContainerRef}>
                        <CardHead srcHead={props.srcHead} projektTitel={props.projektTitel} datumBegin={props.datumBegin} datumEnd={props.datumEnd} />
                        <div className="cardContent" >
                            <div className="cardImage">
                                <img src={props.imageSrc} />
                            </div>
                            <div className="cardShortDescription">
                                <div className="shortDescriptionText">
                                    {props.shortDescription}
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            }
            {isCardTurned == true &&
                <>
                    <div className="cardContainer" onClick={turnCard} ref={cardContainerRef}>
                        <CardHead srcHead={props.srcHead} projektTitel={props.projektTitel} datumBegin={props.datumBegin} datumEnd={props.datumEnd} />
                        <div className="cardLongDescription">
                            <div className="cardLongDescriptionText">
                                {props.longDescription}
                            </div>
                        </div>
                    </div>
                </>
            }
        </>
    )

.cardContainer {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgb(199, 220, 248);
    transition: 0.5s;
}

.cardContainer:hover {
    box-shadow: 0px 0px 50px rgb(5, 48, 112);
}