Question

我在这里间隔开，因为我的网站在开发人员工具中使用chrome的iphone视图工作但是当我在iphone上启动网站时，它看起来有些偏差。

无论如何，我的主页上有多个div。 Div只显示一个标题，当我将鼠标悬停在它们上面时，我希望它们在y轴上翻转，隐藏标题并显示更多细节。

一切都在我的macbook和imac上运行，但是当我转到我的iphone时，当我加载页面时，细节显示在标题上重叠。当我将鼠标悬停在内容翻转上但保持重叠时。在Macbook和Imac上，前面的内容消失了，后面的内容显示在翻盖上，所以它可以按照我想要的方式工作。

我做错了什么？这是一张图片

这是代码。

HTML

  <div class="flip-container col-md-4" ng-repeat="webinar in webinars" ontouchstart="this.classList.toggle('hover');">
             <div class="flipper">
                 <div class="front">
              <!-- front content -->
                    <h3>
                      {{ webinar.title }}
                    </h3>
                 </div>
                 <div class="back">
                  <!-- back content -->
                    <p>{{ webinar.description | limitTo: 100 }}</p>
                      <a href="#" ng-click="getOneWebinar(webinar)" class="btn btn-default center">Learn more</a>
                 </div>
            </div>
         </div>

CSS

 .flip-container {
    perspective: 1000;
  margin: 10px;
  background-color: rgb(65,61,160);
  margin-bottom: 20px;

}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 360px;
    height: 320px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

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

    position: absolute;
  /*text-align: center;*/
    top: 0;
    left: 0;

}

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

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}
.front h3{
  margin-top: 40%;
  margin-right: 8%;
}
.back p{
  margin-left: 10%;
  margin-top: 33%;
}
.back a{
  margin-left: 11%;
  /*margin-top: 33%;*/
}

Answer 1

直到v 8.4，你需要为你正在进行的所有CSS 3变换包括-webkit-前缀以及变换属性，如背面可见性和过渡。查看caniuse.com以供参考。我不知道还有什么可能是问题。

CSS：悬停时翻转div。正面和背面的内容没有隐藏在手机上的翻盖

1 个答案: