css3 Переходное преобразование, допускающее пробелы между элементами

У меня есть анимация между 2 div. В идеале я хочу, чтобы они «толкали» друг друга, чтобы это ЧУВСТВОВАЛОСЬ, как будто это трехмерная коробка, вращающаяся по оси Z.

у меня есть это

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 в моем проекте содержит вещи, поэтому, когда он масштабируется вверх или вниз, похоже, что он поворачивается, поэтому я не использую простую ширину или левый переход в одиночку.


html css css-transitions
person Richard    schedule 09.01.2019    source источник
comment
Скрипка, которую вы предоставили, выглядит очень странно, и то, что вы хотите сделать, кажется мне неясным, не могли бы вы объяснить немного больше?   -  person Jake    schedule 09.01.2019

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, вы можете избавиться от левого перехода и настроить начало преобразования так, чтобы оба 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>

person Temani Afif    schedule 09.01.2019
comment
Да, это хорошая идея. Я сделал ваше решение, я добавил обертку вокруг своего div и анимировал его левую позицию, чтобы получить идеальный результат :) Спасибо! - person Richard; 09.01.2019