如何解决使用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 举报,一经查实,本站将立刻删除。