css3 Transition transform нека празно пространство между елементите

Имам анимация bewteen 2 div. В идеалния случай искам да се „бутат“ един друг, така че да се ЧУВСТВА, че е 3d кутия, въртяща се на 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>

Както можете да видите, има огромно пространство между моите divs. Опитах се да намаля продължителността на прехода на първия div, така че вторият да се доближи, но независимо от това, все пак имах бяло пространство.

Ето цигулка, с която да играете

Някаква идея?

РЕДАКТИРАНЕ: Divs в моя проект съдържа неща, така че когато се мащабира нагоре или надолу, изглежда, че се върти, ето защо не използвам само обикновена ширина или ляв преход


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