html - 卡片翻转旋转在 iOS 中不起作用

Question

我的网站上有这些类似卡片的图片，一面是图片，另一面是文字。他们在 iOS 上按计划工作直到最近，但由于某些原因发生了一些变化，现在他们没有。 html 如下:

<div class="widephoto card border">
<div class="side" id="bgimg1"></div>
<div class="side back darkbackground">
<p class="bio">Some Text</p>
</div>

这是CSS:

.card {
  height: 100%;
  float:left;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 100%;
  margin: auto;
}

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

.card .side {
  -webkit-backface-visibility: hidden;
                 backface-visibility: hidden;
  height: 100%;
  position: absolute;
  width: 100%;
  overflow: hidden;
}

.card .back {
  transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
                  box-sizing: border-box;
}

.bio{
    margin: 0;
    padding: 10px;
}

.widephoto{
    height: 234px;
    width: 314px;
    display: block;
    position: relative;
}

Answer 1

事实证明，iOS 不会对仅作为背景图像的 div 执行 ol' 旋转移动。我不得不在 div 中放置一张图片，而不是仅仅将图片设置为背景。