Question

我刚刚通过github页面托管了一个小型投资组合，我尝试使用媒体查询使其适用于各种设备大小。投资组合部分包括这些翻转卡，当使用chrome时，我被告知在IO设备上是假的。事实上，背面似乎是在Y轴上的显示镜。

我尝试使用CrossBrowser进行调试，但没有成功。

Here's包含代码的回购， Here's指向虚假部分的链接。

这里的一些代码应该足以重现问题（但我仍然建议考虑回购代码，因为我可能会错过这里的东西）

HTML

<figure class="fig-container">
  <div class="card">
    <div img class="front face"  style="background-image: url('http://img.youtube.com/vi/x10dBwZFi2Q/0.jpg');"></div>
    <div class="back face">
      <p><b>Location:</b> loc</p>
      <p><b class="text-medium-big">Description: </b> desc</p>
    </div>
  </div>
</figure>

CSS

figure{
  margin-bottom: 0px;
}

.fig-container {
  max-width: 450px;
  min-height: 160px;
  /* horizontal center*/
  margin-left: auto;
  margin-right: auto;
}

.card {
  box-sizing: border-box;
  min-height: 250px;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
  border: 2px solid white;
  border-radius: 20px;
}

.fig-container:hover .card {
  transform: rotateY(180deg);
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 17px;  
}

.face.front {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  color: white;
  font-size: 0.5em;
  text-align: justify;
  line-height: 1.5;
  overflow-y: auto;
}

任何人都能看到错误并了解它可能是什么问题？

翻转IOS上的卡片错误

0 个答案: