CSS：懸停時翻轉div。正面和背面的內容不隱藏在手機上的翻蓋

我被分開在這裏，因爲我的網站在開發人員工具中的chrome中的iphone視圖中工作，但是當我在我的iphone本身上啓動網站時，它看起來歪斜。CSS：懸停時翻轉div。正面和背面的內容不隱藏在手機上的翻蓋

無論如何，我在我的主頁上有多個div。 Divs只顯示一個標題，當我將鼠標懸停在它們上面時，我希望它們在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%;*/ 
}

來源

2016-02-05 manutdfan

你在哪個版本的iOS？ – Amir5000

電話上最新的一個。 @ Amir5000 – manutdfan

在v 8.4之前，您需要爲所做的所有CSS 3轉換添加-webkit-前綴，以及轉換屬性（如背面可見性和轉換）。請查看http://caniuse.com/以供參考。我不知道還有什麼可以成爲誠實的問題。 – Amir5000

至V 8.4，你需要包括-webkit-前綴所有的CSS 3變換你正在做的還有轉換屬性如背面可見性和轉換。請參閱caniuse.com以供參考。我不知道還有什麼可以成爲誠實的問題。

來源

2016-02-09 17:51:15 Amir5000

CSS：懸停時翻轉div。正面和背面的內容不隱藏在手機上的翻蓋

回答

相關問題