Css 当div大小被translate3d更改时，为什么会出现边距？

更改div大小时，块之间会出现缩进

<div class="test2">test2
      <p>hello</p>
      <p>hello</p>
</div>

测试1
测试2
测试3

您拥有的不是边距，而是由于您正在使用的变换而添加的逻辑空间。您可能会注意到，您在第一次尝试时添加了翻译来解决此问题

假设您有一个关闭的窗口，当您打开两侧时，您将能够看到两侧之间的空间，这在您对两侧应用旋转时是合乎逻辑的：

因此，div的旋转将产生相同的效果：

所以要修复它，你可以像第一个一样应用平移，但是你会注意到两边的宽度不一样，因为两个div没有相同的高度，并且相同角度的旋转会使宽度不同（这是透视图，近处的对象看起来比远处的对象大）

因此，要解决此问题，还必须在Z轴上添加平移，以使第二个div更接近，并具有以下功能：

完整代码：

.container
{
透视图：600px；
变换样式：保留-3d；
}
.test1
{
背景色：#fff；
边框：1px实心#ccc；
宽度：50%；
填充：1em；
保证金：自动；
}
.test2
{
背景色：#fff；
边框：1px实心#ccc；
位置：相对位置；
宽度：50%；
填充：1em；
保证金：自动；
变换：旋转（45度）；
变换原点：中心-顶部；
外形：1px实心透明；
}
.test3
{
背景色：#fff；
边框：1px实心#ccc；
位置：相对位置；
宽度：50%；
填充：1em；
保证金：自动；
变换：平移3d（0，-57px，57px）旋转3d（1,0,0，-45度）；
变换原点：中心-底部；
}

测试1
测试2
你好

你好

测试3

这里有一个解决方案（部分）可以实现固定视图，旋转div之间没有任何分离

• 我们正在使用

  变换原点：中间-底部；对于test2和变换原点：居中顶部；对于test3

  。这可确保这两条公共边保持50%的固定宽度
• 这种方法的问题是，如果我们试图对齐test1，它是最顶部的div，没有任何旋转或转换，我们需要手动调整其宽度和边距，使其粘在test2的顶部

不带测试1:

.container
{
透视图：600px；
变换样式：保留-3d；
}
.test2
{
背景色：#fff；
边框：1px实心#ccc；
位置：相对位置；
宽度：50%；
填充：1em；
保证金：自动；
变换：旋转（45度）；
变换原点：中心-底部；
外形：1px实心透明；
}
.test3
{
背景色：#fff；
边框：1px实心#ccc；
位置：相对位置；
最大宽度：50%；
填充：1em；
保证金：自动；
变换：旋转3d（1,0,0，-45度）；
变换原点：中心-顶部；
}

测试2
你好

你好

你好

你好

测试3

您指的是什么尺寸？@Temaniaf如果OP是指在.test2类容器中添加内容时。我得到了以下修复：在底部两个div中添加了额外的项，但顶部div没有对齐，没有转换。但这并不能修复宽度差异。@Highdef是的，因为这不是一个问题。。。这是使用两种不同宽度的变换的逻辑效果。。。我想我们需要理解的是，现在发生的不是问题，而是正常的行为。但是，实际上，我得到了底部两个div的修复，以保持它们的视图，没有任何额外的转换，但是顶部div是一个单独的问题。@Highdef得到了修复，我不确定什么是修复：）但让我看看，这样我就可以see@TemaniAfif这是我见过的最好的windows示例。非常感谢你。现在我明白我接下来要去哪里了，你可以看到你改变了旋转的原点，因此你在另一个轴上旋转，这是它们之间的轴：）。。因此，这不是一个修复，而是另一种使用自己的逻辑进行旋转的方式，您会看到，您将遇到与第一个相同的*问题*（这也是逻辑）div@TemaniAfif就像我说的，其中一个会给其他人带来痛苦，但它解决了OP在调整两个旋转div时面临的具体问题。这就是为什么我说没有问题，但我们只需要理解逻辑：）我知道你明白了。。。但我认为OP不理解this@TemaniAfif是的，我希望这两个解决方案能让他明白：）我在回答中添加了更多细节，以及关于如何让两个部门保持紧密联系的另一个想法；）