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的定位是不一样的。 我隔离了我的问题，并在以下位置创建了一个codepen：http://codepen.io/3MO/pen/XpwYBB

我检查每个边的尺寸和坐标，我看不到问题。我错过了什么？

非常感谢！

Answer 1

该divs不适合parrent。

您忘记了boxSide divs上的额外border-width。 您的#mainBox应该有width: 1102px;。