Html 三维长方体面对齐css

我试图使用HTML/CSS制作一个响应性的长方体，但是长方体的右边没有与其余的面对齐。 有人能帮我解决这个问题吗

我正在粘贴相同的JSFIDLE链接，如下所示：

#容器{
宽度：100vw；
高度：100vh；
透视图：1000px；
透视来源：50%50%；
}
#货柜组{
高度：100vh；
/*宽度：100%*/
位置：绝对位置；
/*显示：内联块*/
变换原点：50%50%；
变换样式：保留-3d；
}
#左{
宽度：100vh；
背景：钢蓝；
变换：translateX（-50vh）translateZ（-50vh）rotateY（90度）；
}
#对{
宽度：100vh；
背景：水鸭；
变换：translateX（50vw）旋转（-90度）；
}
#地板{
宽度：100%；
背景:#55DF03；
变换：translateY（50vh）translateZ（-50vh）rotateX（90度）；
}
#细胞{
宽度：100%；
背景：灰色；
变换：translateY（-50vh）translateZ（-50vh）rotateX（90度）；
}
#背{
宽度：100%；
背景：#2091FE；
变换：translateZ（-100vh）；
}

---

我已更改了移动元素的方式，更容易更改要使用的变换原点：

正文{
边际：0px；
}
#容器{
宽度：100vw；
高度：100vh；
透视图：1000px；
透视来源：50%50%；
}
#货柜组{
高度：100vh；
宽度：100vw；
位置：绝对位置；
变换样式：保留-3d；
}
#集装箱#左{
宽度：100vh；
背景：钢蓝；
变换原点：左中心；
变换：旋转（90度）；
}
#集装箱#对{
宽度：100vh；
背景：水鸭；
变换原点：右中心；
变换：旋转（-90度）；
右：0px；
}
#地板{
宽度：100%；
背景:#55DF03；
变换：translateY（50vh）translateZ（-50vh）rotateX（90度）；
}
#细胞{
宽度：100%；
背景：灰色；
变换：translateY（-50vh）translateZ（-50vh）rotateX（90度）；
}
#背{
宽度：100%；
背景：#2091FE；
变换：translateZ（-100vh）；
不透明度：0.5；
}

---

这是响应灵敏的3D长方体面：

#容器{
宽度：100vw；
高度：100vh；
透视图：1000px；
透视来源：50%50%；
}
#货柜组{
高度：100vh；
/*宽度：100%*/
位置：绝对位置；
/*显示：内联块*/
变换原点：50%50%；
变换样式：保留-3d；
}
#左{
宽度：100vh；
背景：钢蓝；
变换：translateX（-50vh）translateZ（-50vh）rotateY（90度）；
}
#对{
宽度：100vh；
背景：水鸭；
变换：translateX（0%）旋转（-90度）；
右：0px；
变换原点：100%100%！重要；
}
#地板{
宽度：100%；
背景:#55DF03；
变换：translateY（50vh）translateZ（-50vh）rotateX（90度）；
}
#细胞{
宽度：100%；
背景：灰色；
变换：translateY（-50vh）translateZ（-50vh）rotateX（90度）；
}
#背{
宽度：100%；
背景：#2091FE；
变换：translateZ（-100vh）；
}

对于左面，当我使用“translateX（-50vh）”时，它会完美对齐。但我觉得它应该在“translateX（-50vw）”上对齐。“-50vh”如何足够？该解决方案完美地解决了我的问题，但我是否有可能使用translate而不是transform origin来解决此问题？因为现在#左和#右的宽度是100vw，而不是100vh。它延伸到后面。如果你只是删除#back，它是可见的。你是对的，我没有注意到这个问题。我已经解决了这个问题，保留了修改变换原点的想法。我还对您的评论添加了一个解释。是的，我还想说，使用正确的

转换原点
设置比使用
转换
转换更好。@Harry谢谢！这就是我要找的。谢谢你的回答。它教会了我从另一个角度看待解决方案。