CODEWITHSUNDEEP
csscss-transforms
pavel
pavel

Reputation: 91

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.

Upvotes: 4

Views: 463

Answers (2)

Temani Afif
Temani Afif

Reputation: 273010

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>

Upvotes: 2

user7207170
user7207170

Reputation:

Here's one solution (partial) to achieve the fixed view and no seperation whatsoever between the rotated divs.

  • We're making use of transform-origin:center bottom; for the test2 and transform-origin: center top; for test3. This ensures that those two common edges stay at the fixed width of 50%.
  • The issue with this approach is if we try to align the test1 which is the topmost div with no rotating or transformation whatsoever, we need to manually adjust its width and margin to make it stick to the top of test2.

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

With test1: (without adjustments)

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

Upvotes: 2

Related Questions