CSS 卡翻转故障（填充？边距？）

Question

我正在尝试创建一个交互式日历。我添加了一个简洁的 CSS 卡片翻转动画 (tutorial here) 来翻转日历日期并在卡片背面显示更多信息。

如果您将鼠标悬停在日期上会出现问题，由于某种原因，框顶部有一个突出显示的小白条。我似乎无法弄清楚如何解决它（下图中的红色箭头表示问题）。

这是说明问题的 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

问题是由.thumbnail 类上的padding: 4px; 引起的。

.thumbnail 是内置的 Bootstrap 样式。您最好的选择是覆盖您自己的 CSS 中的填充。

要查看此内容，请打开浏览器检查器（在 Chrome 中，右键单击并选择“检查元素”），您会看到 .thumbnail 类有 4 像素的填充。如果取消选中该样式，您会发现问题消失了。

我已在此处发布了您的演示的一个分支。您可以在 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;
}

通过How to fix flicker when using Webkit transforms & transitions

另一种解决方案是移动导致闪烁的元素。见Flickering div when using CSS transform on hover。