Search code examples
csscss-transforms

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

When I change the div size, an indent appears between the blocks.

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

Help me how to remove it?

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

Without margin: enter image description here

With margin: enter image description here

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

P.S. I see CSS transform 3d cube offsets, but I think that's different problem.

Solution

  • what you have is not margin but a logical space added due to the transfomation you are using. You may notice that you added a translation to fix this issue at the first try.

    Imagine you have a closed window and when you open both sides you will be able to see space between both side which is logical as you applied a rotation to both sides :

    enter image description here

    So the rotation of your div will create the same effect :

    enter image description here

    So to fix it you can apply a translation like you did with the first one but you will notice that both side won't have the same width because both div doesn't have the same height and a rotation with same angle will make width different (this is perspective, a close object look bigger that a far one)

    enter image description here

    So to fix this you have to also add translation on the Z-axis to make the second div more closer and have this :

    enter image description here

    Full code :

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