如何使翻转卡响应

Question

我曾尝试多次制作翻转卡。我可以使用preserve-3d属性创建翻转效果，但它在IE 11中无效。我再次搜索网页并尝试创建翻转效果。我能做到这一点。翻转卡现在可以在Chrome，Firefox和IE 11中使用，但最终的翻转卡无法响应。

以下是代码：

＆＃13;

＆＃13;

.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%;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何人都能帮助他们做出回应吗？

Answer 1

你的卡＆gt; div填充部分的最小宽度和小变化并删除媒体查询..因为它现在自动响应。在IE 11上查看它。

＆＃13;

＆＃13;

 

       .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 */
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;