Positioning a CSS CSS Transform Element

I have a basic 3D map that flips when you click a button (using the css perspective property on the parent and then rotate it on both sides.

I'm just wondering how the positioning of these elements works, since whenever I adjust the font size (in em), the cards go further away from the actual parent.

I must have forgotten some important property.

Here pen .


source to share

2 answers

Custom browsers add fields to your classes front

and back

that are related to font size. To fix this add margin: 0

to each one in CSS.

.front, .back {
    margin: 0;


If things start to break, please 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 Changing the margin in the shape tag .



Items figure

have a default value margin: 40px 1em;

. As the font size increases for graphic elements, the margin will also increase. Set your margin to 0 and you're good to go.



All Articles