CSS 过渡和变换样式不适用于移动设备

Question

我已经成功地让两个图像在悬停时像卡片一样翻转。使用过渡和变换样式。它适用于移动设备（iPhone；chrome 和 safari）。我究竟做错了什么？非常感谢任何指导。

我已经查看了 StackOverflow 上以前的帖子，但我发现的内容对我的情况没有帮助。

<div class="flip-box">
    <div class="flip-box-inner">
        <div class="flip-box-front">
            <img src="./resources/images/green.jpg" alt="" style="width:421px;height:552px">
        </div>
        <div class="flip-box-back">
            <img src="./resources/images/brown.jpg" alt="" style="width:421px;height:552px">
        </div>
    </div>
</div>

.flip-box {
  background-color: transparent;
  width: 421px;
  height: 552px;
  border: 0px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d; 
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

.flip-box-front {
  transform-style: preserve-3d;
}

.flip-box-back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

我预计卡片会在移动设备上来回翻转，但它只转换一次。

Answer 1

不回答直接问题，但不妨试试DavidWalsh.name 的 CSS（带前缀）。

/* entire container, keeps perspective */
.flip-box {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
  /* flip the pane when hovered */
  .flip-box-inner:hover .flipper, .flip-box-inner.hover .flipper {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }

.flip-box, .flip-box-front, .flip-box-back {
  width: 421px;
  height: 552px;
}

/* flip speed goes here */
.flip-box-inner {
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;

  position: relative;
}

/* hide back of pane during swap */
.flip-box-front, .flip-box-back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.flip-box-front {
  z-index: 2;
  /* for firefox 31 */
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flip-box-back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}