異なる方向へのCSSの遷移

Question

ラッパー（600x600px）を、その内部の小さなボックスの上に置いたときに埋めようとしています。左上隅のボックスは、通常のトランジションタイミング機能を使って簡単に行えますが、他の方向に拡大しようとすると、私は立ち往生しました。

だから私は、次があります：ボックス付き

#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>

Answer 2

私はちょうど "左：0;"をホバー状態に追加すると思います。

div.box2:hover { 
    left: 0; 
    width: 600px; 
    height: 600px; 
} 

希望すると助かります。