All geek questions in one place

Why does margin appear when the size of a div changes to translate3d?

When I resize the div, 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>
Run codeHide result

Without field: enter image description here

With field: enter image description here

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

PS I see CSS conversion of 3d cubic displacements , but I think these are different problems.

+4
source share
2 answers

what you have is not a margin, but just a logical space added due to the zoom you use. You may notice that you added a translation to fix this problem on the first try.

, , , , , :

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>
Hide result
+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>
Hide result

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>
Hide result
+2

Source: https://habr.com/ru/post/1691313/

More articles:


All Articles