不同方向的 CSS 过渡

Question

当我将鼠标悬停在其中的较小盒子上时，我试图填充一个 wrapper (600x600px)。对于左上角的框，使用常规的 transition-timing-function 很容易完成，但是当尝试向其他方向放大时，我卡住了。

所以我有以下内容:

#allbox {
  background: #bbb;
  width: 600px;
  height: 600px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0
}

带盒子:

div.box1 {
  position: absolute;
  top: 0%;
  left: 0%;
}

div.box2 {
  position: absolute;
  top: 0%;
  left: 37.5%;
}

我使用的过渡:

#div1 {-webkit-transition-timing-function: linear;}
#div1 {transition-timing-function: linear;}
div.box1:hover {
  width: 600px;
  height: 600px;
}

但我无法为以下框找到一个好的方法。

Answer 1

这里是一个使用 z-index 保持悬停在顶部的示例。

#allbox {
  background: #bbb;
  width: 600px;
  height: 300px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0
}
#allbox div {
  position: absolute;
  z-index: 1;
  top: 0%;
  width: 33.33%;
  height: 50%;
  transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 1s linear;
}
div.box1 {
  left: 0;
  background: blue;
}
div.box2 {
  left: 33.33%;
  background: red;
}
div.box3 {
  left: 66.66%;
  background: green;
}
#allbox div:hover {
  z-index: 2;
  left: 0;
  width: 100%;
  height: 100%;
  transition: left 0.5s linear, width 0.5s linear, height 0.5s linear, z-index 0s linear;
}

<div id="allbox">
  <div class="box1">  
  </div>
  <div class="box2">  
  </div>
  <div class="box3">  
  </div>
</div>