卡翻转旋转在iOS中不起作用

Question

I have these card-like images on my site, with an image on one side and text on the other side. They worked as planned on iOS until recently, but for some reason something changed and now they don't. The html is below:

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

and here's the 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

It turns out that iOS will not do the ol' spin move with a div that is only a background image. I had to put an image in the divs instead of just setting the image as the background.