Сделаем анимацию переворачивания карточки
На первом шаге проведем некоторую подготовку.
Во-первых, задняя часть карты (.face.back) должна быть развернута на 180 градусов вокруг оси Y
Во-вторых, у каждой стороны (.back и .front) должна быть скрыта задняя часть.
Для элемента .card сразу добавим переход для свойства transition длительностью одну секунду.
Ну и не забудь про скрипт, для запуска перехода.
При нажатии на кнопку на передней части карточки - элементу .card нужно добавить класс flipped.
При нажатии на кнопку на задней части карточки - класс flipped нужно убрать у .card

Эта задача — часть курса по Full-Stack JavaScript .
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.

Начни Учить Full-Stack JavaScript СЕЙЧАС!

index.html

<!DOCTYPE>
<html>
  <head>
    <style>
        body {
            display: grid;
            place-items: center;
            height: 100vh;
            font-family: monospace;
        }
        .wrapper {
            width: 200px;
            height: 260px;
            perspective: 600px;
        }
        h2  {
            font-size: 24px;
            color: #5E6572
        }
        p {
            text-align: center;
            color: white;
            padding: 8px;
        }
        button {
            background-color: #3454D1;
            color: white;
            border-radius: 16px;
            padding: 8px 16px;
            font-weight: bold;
            border: none;
            outline: none;
            cursor: pointer;
        }
        .card {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .face {
            height: 100%;
            width: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        .front {
            background-color: #D5CAD6;
        }
        .back {
            background-color: #6B5E62;
        }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="card">
        <div class="face front">
          <h2>Card One</h2>
          <button>DETAILS</button>
        </div>
        <div class="face back">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non sagittis justo. </p>
          <button>BACK</button>
        </div>
      </div>
    </div>
  </body>
</html>