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>

没有保证金： enter image description here

有保证金： enter image description here

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

P.S。我看到CSS transform 3d cube offsets，但我认为这是另一个问题。

Answer 1

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

想象一下，你有一个关闭的窗口，当你打开两侧时，你将能够看到两侧之间的空间，这是你向两侧施加旋转时的逻辑：

因此，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的顶部。

没有test1：

.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>

使用test1 :(无需调整）

.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大小时，为什么会出现边距？

2 个答案: