Как сделать флип-карту адаптивной

Question

Я пытался создать флип-карту много раз. Я мог создать эффект флип, используя свойство preserve-3d, но он не работал в IE 11. Я снова искал в Интернете и попытался создать эффект флип. Я мог бы сделать это. Откидная карта теперь работает в Chrome, Firefox и IE 11, но последняя откидная карта не отвечает.

Вот код:

.card {
  max-width: 500px;
  height: 300px;
  position: relative;
}
.card > div {
  width: 500px;
  height: 300px;
  position: absolute;
  transition: transform 3s;
  border-radius: 25px;
  padding: 20px 20px 20px 20px;
  overflow: hidden;
}
.card > .front {
  width: 500px;
  height: 300px;
  background-color: green;
}
.card:hover .front {
  transform: rotateY(90deg);
}
.card > .back {
  width: 500px;
  height: 300px;
  background-color: lime;
  transform: rotateY(-90deg);
}
.card:hover .back {
  transform: rotateY(0deg);
}
.Card-Shadow {
  box-shadow: 3px 3px 3px brown;
  -webkit-box-shadow: 3px 3px 3px brown;
  /* -webkit is vendor prefix referring to Chrome, Safari, and Opera browsers */
}
@media only screen and (max-width: 500px) {
  .card {
    width: 100%;
  }
  .back {
    width: 100%;
  }
  .front {
    width: 100%;
  }
}

<div class="card">
  <div class="front Card-Shadow">Hello</div>
  <div class="back Card-Shadow">Thank You</div>
</div>

Может ли кто-нибудь помочь сделать его отзывчивым?

Answer 1

Просто измените минимальную ширину и внесите небольшие изменения в раздел карты>div padding и удалите медиазапрос.. потому что теперь он автоматически реагирует. проверьте это на IE 11.

 

       .card {
        position: relative;
       }
    .card > div {
      min-width: 100%;
      height: 300px;
      position: absolute;
      transition: transform 3s;
      border-radius: 25px;
      padding: 20px 0px 20px 2px;
      overflow: hidden;
    }
    .card > .front {

      background-color: green;
    }
    .card:hover .front {
      transform: rotateY(90deg);
    }
    .card > .back {

      background-color: lime;
      transform: rotateY(-90deg);
    }
    .card:hover .back {
      transform: rotateY(0deg);
    }
    .Card-Shadow {
      box-shadow: 3px 3px 3px brown;
      -webkit-box-shadow: 3px 3px 3px brown;
      /* -webkit is vendor prefix referring to Chrome, Safari, and Opera browsers */
    }

    <div class="card">
      <div class="front Card-Shadow">Hello</div>
      <div class="back Card-Shadow">Thank You</div>
    </div>