使用Bootstrap网格以动态宽度/高度尺寸翻转卡片

问题描述

我已经有效地提出了一种可在非IOS设备/浏览器上使用的解决方案。该问题仅在IOS设备上显示。这是我的jsfiddle： https://jsfiddle.net/f592v4or/12/

HTML标记：

<div class="row">
  <div class="col-md-4" style="margin-bottom: 25px;">
    <div class="card-flip">
      <div class="card-front">
        <img src="IMG_PATH">
      </div>
      <div class="card-back">
        <img src="IMG_PATH">
      </div>
    </div>
    <div>
      Some text underneath the card.
    </div>
  </div>
</div>

CSS标记：

img { width: 100%; }

.card-flip > div {
  backface-visibility: hidden;
  transition: transform 300ms;
  transition-timing-function: linear;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
}

.card-front {
  width: 100%;
  height: calc( 100% - 15px ) !important;
  transform: rotateY(0deg);
}
.card-back {
  width: calc( 100% - 30px ) !important;
  height: calc( 100% - 15px ) !important;
  transform: rotateY(180deg);
  position: absolute;
  top: 0; 
}
.card-flip:hover .card-front { transform: rotateY(-180deg); }
.card-flip:hover .card-back { transform: rotateY(0deg); }

所有图像均为正方形图像占位符，并应在加载和悬停时填充正方形长宽比图像大小。以下是页面加载时间的示例：

以下是将鼠标悬停在第一张图片上时发生的情况的示例（旋转动画未显示）：

当我在IOS设备上查看此问题时出现问题，如下所示（使用野生动物园）：

在所有iPad和iPhone上，通过Chrome浏览器也可以看到此^问题。关于如何使它在所有设备/浏览器上完全起作用的任何建议？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）