Question

我有一个基本的3D卡，当您按下按钮时会翻转（使用父视图上的CSS透视属性，然后在两侧旋转Y.

我只是想知道这些元素的定位是如何工作的，因为无论何时我调整字体大小（在em中），卡片都会远离实际的父母。

我一定忽略了某种重要的财产。

这是pen。

Answer 1

figure元素具有默认margin: 40px 1em;。当您增加图形元素的字体大小时，边距也会增加。将边距设置为0，你很好。

Answer 2

用户浏览器会为front和back类添加与字体大小相关的边距。要解决此问题，请在CSS中为每个人添加margin: 0。

.front, .back {
    margin: 0;
}

如果事情开始破坏，请注意Webkit浏览器添加这些规则，

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 40px;
-webkit-margin-end: 40px;

并且其他浏览器添加自定义规则。 Firefox添加了以下内容：

margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;