3D CSS变换元素定位

Question

我有一张基本的3D卡片，当你按下一个按钮时它会翻转（使用CSS perspective属性在父元素上，然后在两个面上使用rotateY）。

我只是想知道这些元素的定位是如何工作的，因为每当我调整字体大小（以em为单位），卡片就会远离实际的父元素。

我一定忽略了某种重要的属性。

这是笔者。

- Oliver

---

除了您的链接之外，您还应该提供与您遇到问题相关的代码部分。 - Gaël Barbin

Answer 1

< p > figure 元素默认的 margin: 40px 1em;。当你增加 figure 元素字体大小时，边距也会随之增加。将边距设置为 0 即可解决问题。

- Chad von Nau

---

谢谢！这表明我对编程知之甚少！ - Oliver

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;

请查看HTML5 <figure> 的边距和内边距以及更改 figure 标签的边距。

- Cheese