为什么在由transform3d更改div大小时出现边距？ [英] Why does a margin appears when the div size is changed by translate3d?
问题描述
当我更改div大小时，在块之间会出现缩进。
< div class = test2> ; test2
< p> hello< / p>
< p> hello< / p>
< / div>
帮我如何删除它？
.container {视角：600像素； transform-style：preserve-3d;}。test2 {/ *更多用于摆弄* / transform：rotateX（45deg）; transform-origin：居中；}。test3 {/ *更多到小提琴* / transform：translate3d（0，-34px，0）rotation3d（1,0,0，-45deg）;转换来源：居中；}
< div类=容器> < div class = test1> test1< / div> < div class = test2> test2< / div> < div class = test3> test3< / div>< / div>
没有保证金：
有余量：
因此div的旋转将产生相同的效果：
因此，要解决此问题，您可以像第一个一样应用翻译，但是您会注意到，由于两个div的 height 和旋转相同角度将使宽度不同（这是透视图，靠近的对象看起来比远处的对象大）
因此，要解决此问题还可以在Z轴上添加平移以使第二个div更近，并具有以下功能：
完整代码：
.container
{
视角：600像素；
转换样式：preserve-3d；
}
.test1
{
background-color：#fff;
边框：1px实心#ccc；
宽度：50％；
padding：1em；
保证金：自动；
}
.test2
{
background-color：#fff;
边框：1px实心#ccc；
职位：相对；
宽度：50％；
padding：1em；
保证金：自动；
转换：rotateX（45deg）;
transform-origin：居中；
轮廓：1px纯透明；
}
.test3
{
background-color：#fff;
边框：1px实心#ccc；
职位：相对；
宽度：50％；
padding：1em；
保证金：自动；
转换：translate3d（0，-57px，57px）rotation3d（1,0,0，-45deg）;
transform-origin：中心底部；
}
< 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>
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:
With margin:
https://jsfiddle.net/gipahs/ved2q3vd/9/
P.S. I see CSS transform 3d cube offsets, but I think that's different problem.
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 :
So the rotation of your div will create the same effect :
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)
So to fix this you have to also add translation on the Z-axis to make the second div more closer and have this :
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>
这篇关于为什么在由transform3d更改div大小时出现边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
