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不会做ol＆＃39;使用仅作为背景图像的div旋转移动。我不得不在div中放置一个图像，而不是仅将图像设置为背景。

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

1 个答案: