CSS3, div не правильно выровнен после вращения

Question

Я перед загадкой: у меня есть коробка, css определяет ширину каждой стороны. Я использую ссылки для поворота окна, добавляя класс, чтобы показать каждую сторону. Ссылка только очищает классы коробки, и добавляет один из следующего класса:

.show-front { 
    transform: rotateY(0deg); 
} 

.show-back { 
    transform: rotateY(-180deg); 
} 

.show-left { 
    transform: rotateY(-270deg); 
} 

.show-right { 
    transform: rotateY(-90deg); 
} 

Однако, в зависимости от стороны спереди, выравнивание DIV не то же самое. Я выделил свою проблему и создал кодофф по следующему адресу: http://codepen.io/3MO/pen/XpwYBB

Я проверяю размеры и координаты каждой стороны, поставленной спереди, я не вижу проблемы. Что мне не хватает?

Большое спасибо!

Answer 1

Дивы не помещаются внутри патента.

Вы забыли о дополнительных border-width на своих boxSide divs. Ваш #mainBox должен иметь width: 1102px;.