Let’s animate the flipping of the card
We’ll do some preparation at the first step.
Firstly, the back of the map (.face.back) must be rotated 180 degrees around the Y axis
Secondly, each side (.back and .front) must have a hidden back.
For the .card element, let’s immediately add a transition for the transition property with a duration of one second.
Well, don’t forget about the script to start the transition.
When clicking on the button on the front of the card - the .card element needs to be added the flipped class.
When you click on the button on the back of the card - the flipped class needs to be removed from the .card

This task is part of the Full-Stack JavaScript Course.
If you have any issues with it, you can ask for community help below the post.
Feel free to help others if you’ve already solved the task.

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>