Clever Geek Handbook

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 .

+3


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 .

+1


source


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.



+2


source






More articles:


All Articles