Html css3转换让元素之间留有空白

我有一个动画是由两个部分组成的。理想情况下，我希望动画彼此“推动”，这样它感觉就像是一个在Z轴上旋转的3d长方体

我有这个

正文{
溢出：隐藏
}
div{
位置：绝对位置；
显示：内联块；
保证金：0；
}
部门：第一个孩子{
左：0；
宽度：100%；
身高：100%；
背景色：#453525；
变换：scaleX（1）；
过渡：变换。8秒缓进，宽度。8秒缓进，左侧。8秒缓进；
}
分区：第n个孩子（2）{
左：101%；
宽度：0；
身高：100%；
背景色：#754512；
变换：scaleX（0）；
过渡：变换。8秒缓进，宽度。8秒缓进，左侧。8秒缓进；
}
正文：悬停div：第一个孩子{
变换：scaleX（0）；
宽度：0；
左-101%；
}
正文：悬停分区：第n个子项（2）{
变换：scaleX（1）；
宽度：100%；
左：0；
}

---

我认为您可以去掉左变换并调整变换原点，使两个div保持链接：

正文{
溢出：隐藏；
保证金：0；
高度：100vh；
}
div{
位置：绝对位置；
显示：内联块；
保证金：0；
}
部门：第一个孩子{
左：0；
宽度：100%；
身高：100%；
背景色：#453525；
变换：scaleX（1）；
变换原点：右；
过渡：变换.8s缓进，宽度.8s缓进；
}
分区：第n个孩子（2）{
右：0；
宽度：0；
身高：100%；
背景色：#754512；
变换：scaleX（0）；
变换原点：左；
过渡：变换.8s缓进，宽度.8s缓进；
}
正文：悬停div：第一个孩子{
变换：scaleX（0）；
宽度：0；
}
正文：悬停分区：第n个子项（2）{
变换：scaleX（1）；
宽度：100%；
}

---

我认为您可以去掉左变换并调整变换原点，使两个div保持链接：

正文{
溢出：隐藏；
保证金：0；
高度：100vh；
}
div{
位置：绝对位置；
显示：内联块；
保证金：0；
}
部门：第一个孩子{
左：0；
宽度：100%；
身高：100%；
背景色：#453525；
变换：scaleX（1）；
变换原点：右；
过渡：变换.8s缓进，宽度.8s缓进；
}
分区：第n个孩子（2）{
右：0；
宽度：0；
身高：100%；
背景色：#754512；
变换：scaleX（0）；
变换原点：左；
过渡：变换.8s缓进，宽度.8s缓进；
}
正文：悬停div：第一个孩子{
变换：scaleX（0）；
宽度：0；
}
正文：悬停分区：第n个子项（2）{
变换：scaleX（1）；
宽度：100%；
}

你提供的小提琴看起来很奇怪，你想做什么对我来说似乎不清楚，你能再解释一下吗？你提供的小提琴看起来很奇怪，你想做什么对我来说似乎不清楚，你能再解释一下吗？是的，这是个好主意。我做了你的解决方案，我在我的div周围添加了一个包装器，并对其左侧位置设置动画以获得完美的结果：）谢谢！是的，这是个好主意。我做了你的解决方案，我在我的div周围添加了一个包装器，并对其左侧位置设置动画以获得完美的结果：）谢谢！