javascript - CSS3，旋转后di​​v未正确对齐

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

div 不适合父对象。

您忘记了在您的 boxSide div 上添加额外的 border-width。你的 #mainBox 应该有 width: 1102px;。