时间戳

首页 > 解决方案 > css3过渡变换让元素之间的空白

html - css3过渡变换让元素之间的空白

问题描述

我有一个 2 div 之间的动画。理想情况下，我希望它们相互“推动”，这样感觉就像是一个在 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 包含一些东西，所以当它放大或缩小看起来像是在转动时，这就是为什么我不单独使用简单的宽度或左过渡

标签： htmlcsscss-transitions

解决方案

我认为您可以摆脱左转换并调整转换原点，以便两个 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>

推荐阅读