CSS卡片翻轉故障（填充？邊距？）

我正在嘗試創建一個交互式日曆。我添加了一張整齊的CSS卡片翻轉動畫(tutorial here)來翻轉日曆日期並在卡片的背面顯示更多信息。如果你將鼠標懸停的日期，由於某種原因，有一個小CSS卡片翻轉故障（填充？邊距？）

問題，強調了白條在框的頂部。我似乎無法弄清楚如何解決它（下圖中的紅色箭頭表示問題）。

Problem indicated by the red arrow

這裏是一個CodePen和HTML示出的問題。我不確定哪部分CSS代碼導致了問題。 http://codepen.io/ipiyale/pen/Athfd?editors=110

<div class="col-lg-2 col-md-4 col-xs-6 thumb flip-container"> 
    <div class="thumbnail flipper"> 
     <div class="day front"><h2>1</h2></div> 
     <div class="activity back"> 
      <p>Afternoon Activity</p> 
      <p>Evening Activity</p> 
     </div> 
    </div> 
</div>

有什麼建議？

來源

2014-10-27 ipiyale

使用backface-visibility似乎幫助。

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

經由How to fix flicker when using Webkit transforms & transitions

另一種解決方案，涉及移動所引起的閃爍的元素。見Flickering div when using CSS transform on hover。

來源

2014-10-27 02:52:07 JSuar

這確實當卡被翻轉解決這個問題，但填充問題仍然出現在側翻過程中第二次分裂。 – trnelson 2014-10-27 02:58:31

是的，它看起來像填充是導致整體問題。我會將其答案提供給其他可能適用此解決方案的人員。 – JSuar 2014-10-27 03:00:57

絕對有趣！不是我熟悉的風格，所以我需要研究它。 :) – trnelson 2014-10-27 03:02:35

的問題是由padding: 4px;在.thumbnail類引起的。

.thumbnail是一個內置的引導風格。你最好的選擇是重寫你自己的CSS中的填充。要查看此操作，請打開瀏覽器檢查器（在Chrome中，右鍵單擊並選擇「檢查元素」），您將看到.thumbnail類的填充爲4px。如果你不檢查這種風格，你會發現問題消失。

我已經在此發佈了演示的一個分支。您可以不遠的地方我增加了一個覆蓋用於填充你的CSS底部看到：http://codepen.io/anon/pen/eHKma

.thumbnail { 
    padding: 0; 
}

來源

2014-10-27 02:46:04 trnelson

CSS卡片翻轉故障（填充？邊距？）

回答

相關問題