Html CSS Tesseract（多维数据集）的怪异行为

我成功地在一个立方体中创建了一个立方体，一个Tesseract。但由于某些原因，我真的无法解释，立方体在动画进行时向下移动

如果您观察浏览器的滚动条，则整个多维数据集正在向下移动

当然，您可以通过更改父div元素的边距来“忽略”这个问题，但这并不能解决它

@-webkit关键帧立方体旋转{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}
@立方体旋转的关键帧{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}
@-webkit关键帧计数器{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（-360度）；
变换：旋转（-360度）；
}
}
@关键帧反腐{
从{
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-webkit变换：旋转（-360度）；
变换：旋转（-360度）；
}
}
.立方体包裹{
-webkit透视图：800px；
透视图：800px；
-webkit透视图来源：50%0%；
透视来源：50%0%；
}
.外部{
宽度：300px！重要；
}
.立方体{
位置：相对位置；
宽度：200px；
保证金：0自动；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
-webkit动画：立方体旋转8s无限线性；
动画：立方体旋转8s无限线性；
}
.后端文本{
位置：绝对位置；
宽度：200px；
字体大小：35px；
文本对齐：居中；
字体系列：无衬线；
文本转换：大写；
-webkit动画：反旋转8s无限线性；
动画：反旋转8s无限线性；
}
.外分区{
宽度：300px；
高度：300px；
背景：rgba（255,116,0,0.1）；
线高：530px；
}
.内分区{
宽度：200px；
高度：200px；
背景：rgba（153,69,0,0.7）；
}
.cube div{
位置：绝对位置；
盒影：插入0 0 30px rgba（125125,0.8）；
字体大小：35px；
文本对齐：居中；
字体系列：无衬线；
文本转换：大写；
}
.深度分区前窗格{
-webkit转换：translateY（-100px）translateZ（100px）；
转换：translateY（-100px）translateZ（100px）；
}
.外部深度分区前窗格玻璃{
-webkit转换：translateY（-150px）translateZ（150px）；
转换：translateY（-150px）translateZ（150px）；
}
.深度分区后窗格{
-webkit变换：translateY（-100px）translateZ（-100px）rotateY（180度）；
变换：translateY（-100px）translateZ（-100px）rotateY（180度）；
}
.外部深度分区后窗格{
-webkit变换：translateY（-150px）translateZ（-150px）rotateY（180度）；
变换：translateY（-150px）translateZ（-150px）rotateY（180度）；
}
.深度分区左窗格{
-webkit转换：translateY（-100px）translateX（100px）rotateY（-270度）；
变换：translateY（-100px）translateX（100px）rotateY（-270度）；
}
.外部深度分区左窗格{
-webkit转换：translateY（-150px）translateX（150px）rotateY（-270度）；
变换：translateY（-150px）translateX（150px）rotateY（-270度）；
}
.深度分区右窗格{
-webkit变换：translateY（-100px）translateX（-100px）rotateY（270度）；
变换：translateY（-100px）translateX（-100px）rotateY（270度）；
}
.外部深度分区右窗格{
-webkit转换：translateY（-150px）translateX（-150px）rotateY（270度）；
变换：translateY（-150px）translateX（-150px）rotateY（270度）；
}
.深度分区顶部窗格{
-webkit变换：translateY（-200px）rotateX（-90度）；
变换：translateY（-200px）rotateX（-90度）；
}
.外部深度分区顶部窗格{
-webkit变换：translateY（-300px）rotateX（-90度）；
变换：translateY（-300px）rotateX（-90度）；
}
.深度分区底部窗格{
-webkit变换：rotateX（90度）；
变换：rotateX（90度）；
}

后端
前端
前端
前端
前端

my Chrome 51.0.2704.106 mindeed中的动画看起来不错，我会将其转换到所有其他浏览器中，并检查是否仍然存在。仍然存在，用前缀编辑代码段。