Html 卡片翻转旋转不是'；我不能在iOS中工作

我在我的网站上有这些类似卡片的图片，一面是图片，另一面是文字。直到最近，他们还在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>

---

事实证明，iOS不会使用仅为背景图像的div执行ol'旋转移动。我必须在div中放置一个图像，而不是仅仅将图像设置为背景

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