CSS卡翻轉毛刺（填充？保證金？）

Question

我正在嘗試創建一個交互式日歷。 我添加了一個簡潔的CSS卡片翻轉動畫（這里的教程）來翻轉日歷日期並在卡片背面顯示更多信息。

將鼠標懸停在日期上時出現問題，由於某種原因，框頂部有一個小的突出顯示的白色條。 我似乎無法弄清楚如何解決它（下圖中的紅色箭頭表示問題）。

這是一個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>

有什么建議？

Answer 1

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

.thumbnail是一種內置的Bootstrap風格。 你最好的選擇是覆蓋你自己的CSS中的填充。

要查看此內容，請打開瀏覽器檢查器（在Chrome中，右鍵單擊並選擇“檢查元素”），您將看到.thumbnail類的填充為4px。 如果取消選中該樣式，您將看到問題消失。

我在這里發布了你的演示分支。 您可以在CSS的底部附近看到我添加了覆蓋的覆蓋： http ： //codepen.io/anon/pen/eHKma

.thumbnail {
    padding: 0;
}

Answer 2

使用backface-visibility似乎有所幫助。

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

通過如何在使用Webkit轉換和轉換時修復閃爍

另一種解決方案涉及移動導致閃爍的元素。 在懸停時使用CSS轉換時請參閱閃爍div 。