卡翻转旋转在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进行旋转旋转。 我不得不在div中放置图片，而不仅仅是将图片设置为背景。