HTML: 

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flipping Image</title>
  </head>
<body>

<div class="container">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front"></div>
      <div class="flip-card-back"></div>
    </div>
  </div>
  <button class="button" onclick="flipImage()">Flip Image</button>
</div>
</body>
</html>

CSS: 

  <style>
    .container {
      width: 200px;
      height: 200px;
      perspective: 1000px;
      margin: 50px auto;
    }

    .flip-card {
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.6s;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
    }

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

    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
    }

    .flip-card-front {
      background: url('front_image.jpg') center/cover no-repeat;
    }

    .flip-card-back {
      transform: rotateY(180deg);
      background: url('back_image.jpg') center/cover no-repeat;
    }

    .button {
      padding: 10px 20px;
      margin-top: 20px;
      cursor: pointer;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
    }
  </style>

JAVASCRIPT: 

  <script>
  function flipImage() {
    var card = document.querySelector('.flip-card');
    card.classList.toggle('flipped');
  }
</script>

Try to answer about this code:

What CSS property defines the maximum width and height of the image container in the provided code?

width: 100%;
perspective: 1000px;

height: 200px;
transform: rotateY(180deg);

Which CSS class handles the rotation of the card-like flip effect?

.container
.flip-card-back

.flip-card
.flip-card-inner

What JavaScript function is triggered when the "Flip Image" button is clicked?

toggleFlip()
flipImage()

rotateCard()
flipImage()

Which HTML attribute is used to set the background image of the front and back sides of the card?

background-url
background

image-background
img-src