body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .frame {
      width: 300px;
      height: 300px;
      border: 3px solid blue;
      perspective: 200px;
    }

    .shape {
      width: 300px;
      height: 300px;
      background-color: lightblue;
      transform: rotateY(-45deg);
      transition: transform 3s ease-in-out;
    }

    .frame:hover .shape {
      transform: rotateY(180deg);
    }