Javascript CSS3、div旋转后未正确对齐

我面前有一个谜：我有一个盒子，css定义了每一面的宽度。 我使用链接来旋转长方体，添加一个类来显示每一侧。 该链接只是清除框中的类，并添加以下类之一：

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

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

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

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

但是，根据前面的侧面，div的对齐方式不同。 我隔离了我的问题，并在以下位置创建了代码笔：

我检查了带到前面的每一侧的尺寸和坐标，我看不出问题所在。我错过了什么

---

提前多谢

div不适合放在parrent内

您忘记了在您的

boxSide

div上附加的

边框宽度。
您的
#main box
应具有
宽度：1102px
div不适合安装在支架内

您忘记了在您的
boxSide
div上附加的
边框宽度。
您的
#main box
应具有
宽度：1102px
我不明白：对于我添加的每个边框，我都声明为“1px实心”。另外，在#mainBox上，我添加了宽度：1102，它是变量$mainDivWidth。（我更正了，我在隔离CodePen的问题时忘记将其设置为1102，而不是1100，但1102事件的问题仍然存在。）我刚刚测试，宽度为1102，箱侧边框宽度为1px，问题仍然存在。好的，我知道了，你是对的：箱侧宽度需要比mainBox小2 px。我真傻！谢谢我不明白：对于我添加的每个边框，我都声明为“1px实心”。另外，在#mainBox上，我添加了宽度：1102，它是变量$mainDivWidth。（我更正了，我在隔离CodePen的问题时忘记将其设置为1102，而不是1100，但1102事件的问题仍然存在。）我刚刚测试，宽度为1102，箱侧边框宽度为1px，问题仍然存在。好的，我知道了，你是对的：箱侧宽度需要比mainBox小2 px。我真傻！谢谢