CSS3靈活/響應翻轉卡丟失背面在結束變換

到的翻轉卡片一些其他的例子類似： similar example 1 CSS3靈活/響應翻轉卡丟失背面在結束變換

然而答案通常是爲了確保沒有背景是含卡上，並指定有關卡的正面和背面。然而這對我的例子來說不起作用，因爲它背面的文字不會佔用與正面圖片相同的高度。

我偶爾會讓它正常工作，但是在頁面刷新後，它又回到了被破壞的狀態。

.flipper{ 
      //transform: perspective(1000px); 
      transform-style: preserve-3d; 
      position: relative; 
      width: 100%; 
      min-height: 345px; 
      transition: 0.6s; 
      background-color: rgb(242,245,245); 
      box-shadow: 1px 2px 20px rgba(255, 255, 255, 0.6) inset, 1px 2px 5px 1px rgba(0, 0, 0, 0.5); 
     }

我還沒有開始有這方面的跨瀏覽器測試，但我在看什麼樣的可用（非動畫）的支持？

我意識到這與其他問題非常相似，但是這種情況應該在卡上沒有聲明固定高度方面有足夠的差別，並且背景可能需要應用在卡本身上，臉上

來源

2013-07-18 Slpixe

好吧，我看了一下，並做了一些調整，你可以看到jsFiddle。

http://jsfiddle.net/nsUZB/1/

主要我除去對腳蹼的背景色和最小高度和設置在正面和背面的lightBlue顏色。

.flipper{ 
      //transform: perspective(1000px); 
      transform-style: preserve-3d; 
      position: relative; 
      width: 100%; 
      //min-height: 345px; 
      transition: 0.6s; 
      //background-color: rgb(242,245,245); 
      box-shadow: 1px 2px 20px rgba(255, 255, 255, 0.6) inset, 1px 2px 5px 1px rgba(0, 0, 0, 0.5); 
     } 


     .front, .back{ 
     backface-visibility: hidden; 
     //transition: 0.6s; 
     transform-style: preserve-3d; 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     background: lightBlue; 
    }

讓我知道如果這是正確的方向。

來源

2013-07-18 15:32:14 Fernker

這是通過刪除背景顏色來獲取文本的方法。然而，我是在後面的元素（背面）達到相同高度（沒有聲明固定高度）的效果之後。，以便它保留卡翻轉的效果，而不是作爲圖像高度的卡，翻轉爲文本大小的短卡。這些圖像可能是不同的大小，並且該網站將流體響應。我可以使用JS調整大小來設置高度的靈活圖像的高度，但我在看純CSS的方法。想法？ – Slpixe

啊對了。是的，我玩過它，但我無法找到任何沒有JS的東西。即使我將背部或前部的高度設置爲100％，他們也需要將其設置爲基準，在這種情況下，它們將是其共享父級（.flipper）。所以你可能不得不用JS做點什麼。抱歉。 – Fernker

是的，它現在必須是JS才能保持穩定/更多的支持。我的解決方案几乎可以工作，除了背景99％的時間在背景背後滑動，以及1％的時間完美工作，這真是奇怪。 >>！ – Slpixe

CSS3靈活/響應翻轉卡丟失背面在結束變換

回答

相關問題