3D CSS Transform element positioning

Question

I have a basic 3D card that flips when you press a button (Using the CSS perspective property on the parent and then rotateY on the two sides.

I'm just wondering how the positioning for these elements work, as whenever I adjust the font-size (in em's) the cards go further away from the actual parent.

I must have overlooked some kind of important property.

Here's the pen.

Answer 1

The figure elements have a default margin: 40px 1em;. As you increase the size of the font for the figure elements, the margin will also grow. Set the margin to 0, and you're good.

Answer 2

User browsers add margins to your front and back classes which is relative to the font size. To fix this, add a margin: 0 to each of them in the CSS.

.front, .back {
    margin: 0;
}

---

If things start breaking, take note that Webkit browsers add these rules,

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

and that other browsers add custom rules. Firefox adds the following:

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

See HTML5 <figure> margin/padding and Altering margin in figure tag.