Backface-visibility: hidden not wokring for some reason

Hey guys, I have a div, that has 2 divs where one is front content, and the other one is back content. What I am trying to do is, when I hover over the div, it rotates, and shows the back content, and vice versa. I have been watching this video and doing it similary to that https://www.youtube.com/watch?v=FeJEEE3zc4U , but I am not getting the same results. Here is my code

<div className=”container”>

<div className=”achievements-container”>

<div>

<GlassDiv>

<div className=”front-content”>

<img src={gold} alt=”gtrophy” />

</div>

<div className=”back-content”>

<p>+100</p>

</div>

</GlassDiv>

</div>

<GlassDiv>

<img src={silver} alt=”strophy” />

</GlassDiv>

<GlassDiv>

<img src={bronze} alt=”btrophy” />

</GlassDiv>

<GlassDiv>

<img src={gold} alt=”gtrophy” />

</GlassDiv>

</div>

</div>

);

}

const GlassDiv = styled.div`

display: flex;

justify-content: center;

align-items: center;

justify-self: center;

flex-direction: column;

background: rgba(255, 255, 255, 0.25);

box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.17);

backdrop-filter: blur(5px);

-webkit-backdrop-filter: blur(6px);

border-radius: 50px;

border: 1px solid rgba(255, 255, 255, 0.18);

width: 100px;

height: 100px;

text-align: center;

margin-bottom: 10px;

position: relative;

color: #009ffd;

transition: transform 3s;

transform-style: preserve-3d;

&:hover {

transform: rotateY(0.5turn);

}

;`

.achievements-container {

display: grid;

grid-template-columns: 25% 25% 25% 25%;

}

.front-content {

backface-visibility: hidden;

transform-style: preserve-3d;

}

.back-content {

position: absolute;

backface-visibility: hidden;

transform-style: preserve-3d;

transform: rotateY(0.5turn);

}