супер просто, вот код с правильным объяснением и комментариями

Функция rotate() css определяет преобразование, которое вращает элемент вокруг фиксированной точки на 2D-плоскости, не деформируя его.

Величина вращения, создаваемая rotate(), определяется углом. Если положительный, движение будет по часовой стрелке; если отрицательный, он будет против часовой стрелки. Поворот на 180° называется точечным отражением.

имя оси x, y или z плюс значение угла

Имя оси, вокруг которой вы хотите повернуть затронутый элемент ("x", 'y' или 'z"), плюс угол, определяющий угол, на который нужно повернуть элемент. Эквивалент функции rotateX()/rotateY()/rotateZ() (трехмерное вращение).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

 <style>
     .card {
    width: 300px;
    height: 200px;
    position: relative;
    perspective: 1000px;
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.8s ease;
}

.card-back {
    transform: rotateY(180deg);
}

.flip .card-front {
    transform: rotateY(180deg);
}

.flip .card-back {
    transform: rotateY(360deg);
}



.card-front, .card-back {
    color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: transform 0.8s ease;
    border-radius: 10px; /* add rounded corners to the front and back of the card */
    background-color: rgb(44, 22, 22); /* add a white background color to the card */
    padding: 20px; /* add some padding to the card */
}

.card:hover {
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3); /* add a larger shadow when the card is hovered over */
}

.flip .card-front {
    transform: rotateY(180deg);
    box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.3);
}

.flip .card-back {
    transform: rotateY(360deg);
    box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.3);
}
 </style>   
</head>
<body>
    <div id="card-container">
        <div class="card">
            <div class="card-front">
               <h1>side 1</h1>
            </div>
            <div class="card-back">
                <h1>side 2<h1>
            </div>
        </div>
    </div>
    <br>
    
    <button id="flip-button">Flip Card</button>
  
<script>
    document.getElementById("flip-button").addEventListener("click", function() {
    var card = document.querySelector(".card");
    card.classList.toggle("flip");
});

</script>   
</body>
</html>