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

div不适合parrent。

您忘记了border-width div上的其他boxSide。 您的#mainBox应该有width: 1102px;。