当translate3d更改div大小时,为什么会出现边距?

问题描述 投票:4回答:2

当我更改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/

附:我看到CSS transform 3d cube offsets,但我认为这是另一个问题。

css css3 css-transforms
2个回答
2
投票

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

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

enter image description here

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

enter image description here

所以要修复它你可以像第一个那样应用翻译,但是你会注意到两边都没有相同的宽度,因为两个div的高度不同,而相同角度的旋转会使宽度不同(这是透视,近距离物体看起来更大)

enter image description here

所以要解决这个问题,你还必须在Z轴上添加平移,使第二个div更接近并具有:

enter image description here

完整代码:

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

2
投票

这是一个解决方案(部分)来实现固定视图,并且在旋转的div之间没有任何分离。

  • 我们正在使用transform-origin:center bottom; for the test2transform-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>
© www.soinside.com 2019 - 2024. All rights reserved.