我有一个动画 bewteen 2div. 从理念上讲,我希望彼此"推动",这样感觉就像一个在 Z 上旋转的 3d 盒子。
我有这个
body {
overflow:hidden
}
div {
position:absolute;
display:inline-block;
margin:0;
}
div:first-child {
left:0;
width:100%;
height:100%;
background-color:#453525;
transform:scaleX(1);
transition:transform .8s ease-out, width .8s ease-in, left .8s ease-in;
}
div:nth-child(2) {
left:101%;
width:0;
height:100%;
background-color:#754512;
transform:scaleX(0);
transition:transform .8s ease-out, width .8s ease-in, left .8s ease-in;
}
body:hover div:first-child {
transform:scaleX(0);
width:0;
left:-101%;
}
body:hover div:nth-child(2) {
transform:scaleX(1);
width:100%;
left:0;
}
<div>
</div>
<div>
</div>
如您所见,我的div之间有一个巨大的空间。我试图降低第一个div的过渡持续时间,以便第二个div接近,但无论如何我仍然得到一个空白。
这是一个可以玩的小提琴
知道吗?
编辑:我的项目中的div包含一些东西,所以当它向上或向下缩放时,看起来像是在转动,这就是为什么我不单独使用简单的宽度或左过渡的原因
我认为您可以摆脱左转译并调整变换原点,以便两个div 保持链接:
body {
overflow:hidden;
margin:0;
height:100vh;
}
div {
position:absolute;
display:inline-block;
margin:0;
}
div:first-child {
left:0;
width:100%;
height:100%;
background-color:#453525;
transform:scaleX(1);
transform-origin:right;
transition:transform .8s ease-out, width .8s ease-in;
}
div:nth-child(2) {
right:0;
width:0;
height:100%;
background-color:#754512;
transform:scaleX(0);
transform-origin:left;
transition:transform .8s ease-out, width .8s ease-in;
}
body:hover div:first-child {
transform:scaleX(0);
width:0;
}
body:hover div:nth-child(2) {
transform:scaleX(1);
width:100%;
}
<div>
</div>
<div>
</div>