为什么 translate3d 更改 div 尺寸时会出现边距？

Question

当我更改 div 大小时，块之间出现缩进。

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

帮我看看怎么删除？

.container {
    perspective: 600px;
    transform-style: preserve-3d;
}
.test2 {
    /* more to fiddle */
    transform: rotateX(45deg);
    transform-origin: center top;
}
.test3 {
    /* more to fiddle */
    transform: translate3d(0,-34px,0) rotate3d(1,0,0,-45deg);
    transform-origin: center bottom;
}

<div class="container">
    <div class="test1">test1</div>
    <div class="test2">test2</div>
    <div class="test3">test3</div>
</div>

没有保证金：

保证金：

https://jsfiddle.net/gipahs/ved2q3vd/9/

P.S。我看到 CSS transform 3d cube offsets，但我认为这是不同的问题。

Answer 1

您拥有的不是保证金，而是由于您正在使用的转换而添加的合乎逻辑的 space。您可能会注意到您在第一次尝试时添加了翻译来解决此问题。

假设您有一个闭合的 window，当您打开两侧时，您将能够在两侧之间看到 space，这是合乎逻辑的，因为您对两侧应用了旋转：

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

所以要修复它，您可以像对第一个那样应用翻译，但您会注意到两侧的宽度不相同，因为 div 不具有相同的高度并且旋转相同的角度会使宽度不同（这是透视，近的物体看起来比远的物体大）

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

完整代码：

.container
{
    perspective: 600px;
    transform-style: preserve-3d;
}

.test1
{
    background-color: #fff;
    border: 1px solid #ccc;
    width: 50%;
    padding: 1em;
    margin: auto;
}

.test2
{
    background-color: #fff;
    border: 1px solid #ccc;
    position: relative;
    width: 50%;
    padding: 1em;
    margin: auto;
    
    transform: rotateX(45deg);
    transform-origin: center top;
    outline: 1px solid transparent;

}

.test3
{
    background-color: #fff;
    border: 1px solid #ccc;
    position: relative;
    width: 50%;
    padding: 1em;
    margin: auto;
    
    transform: translate3d(0,-57px,57px) rotate3d(1,0,0,-45deg);
    transform-origin: center bottom;
}

<body>
        <div class="container">
            <div class="test1">test1</div>
            <div class="test2">test2
              <p>hello</p>
              <p>hello</p>
            </div>
            <div class="test3">test3</div>
        </div>
</body>

Answer 2

这是实现固定视图的一种解决方案（部分），并且在旋转的 div 之间没有任何分离。

我们正在使用 transform-origin:center bottom; for the test2 和 transform-origin: center top; for test3。这确保了这两个公共边缘保持在 50%.
这种方法的问题是如果我们尝试对齐 test1 这是最上面的 div 没有旋转或任何转换，我们需要手动调整它的宽度和边距使其粘在test2的顶部。

没有测试 1:

.container
{
   perspective:600px;
    transform-style: preserve-3d;
}


.test2
{
    background-color: #fff;
    border: 1px solid #ccc;
    position: relative;
    width: 50%;
    padding: 1em;
    margin: auto;
    transform: rotateX(45deg);
    transform-origin: center bottom;
    outline: 1px solid transparent;

}

.test3
{
    background-color: #fff;
    border: 1px solid #ccc;
    position: relative;
    max-width: 50%;
    padding: 1em;
    margin: auto;
    
    transform: rotate3d(1,0,0,-45deg);
    transform-origin: center top;
}

<body>
  <div class="container">
    <div class="test2">test2
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
    </div>
    <div class="test3">test3</div>
  </div>
</body>

有测试 1：（无调整）

.container
{
   perspective:600px;
    transform-style: preserve-3d;
}


.test1
{
    background-color: #fff;
    border: 1px solid #ccc;
    width: 50%;
    padding: 1em;
    margin: auto;
}

.test2
{
    background-color: #fff;
    border: 1px solid #ccc;
    position: relative;
    width: 50%;
    padding: 1em;
    margin: auto;
    transform: rotateX(45deg);
    transform-origin: center bottom;
    outline: 1px solid transparent;

}

.test3
{
    background-color: #fff;
    border: 1px solid #ccc;
    position: relative;
    max-width: 50%;
    padding: 1em;
    margin: auto;
    
    transform: rotate3d(1,0,0,-45deg);
    transform-origin: center top;
}

<body>
  <div class="container">
    <div class="test1">test1</div>
    <div class="test2">test2
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
      <p>hello</p>
    </div>
    <div class="test3">test3</div>
  </div>
</body>

为什么 translate3d 更改 div 尺寸时会出现边距？

Why does a margin appears when the div size is changed by translate3d?

css

css-transforms