3D CSS Transform позиционирования элемента

Question

У меня есть основной 3D карта, которая щелкает при нажатии кнопки (с помощью CSS аксонометрии собственности на родителе, а затем rotateY с двух сторон.

Я просто интересно, как позиционирование для этих элементов работает, так как всякий раз, когда я настроить размер шрифта (в эм-х) карты идут дальше от фактического родителя.

Я должен упускать из виду какую-то важное свойство.

Вот pen.

Answer 1

Пользовательские браузеры добавляют поля к вашим front и back классам, которые относятся к размеру шрифта. Чтобы исправить это, добавьте margin: 0 к каждому из них в CSS.

.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> margin/padding и Altering margin in figure tag.

Answer 2

Элементы figure имеют значение по умолчанию margin: 40px 1em;. По мере увеличения размера шрифта для элементов рисунка маржа также будет расти. Установите маржу в 0, и вы добры.