CSSスライダーが奇妙に動作する

Question

CSSのトランジションとトランスフォームを学習しており、CodePenで簡単なスライダーを作成しようとしています。基本的な考え方は、別のものの上に1つのdivがあり、最初のものが上に置かれたときに2番目に滑り落ちるようにしたいということです。オーバーフロープロパティがなくても正常に動作しますが、オーバーフローを追加すると、下にある四角形に隠れてしまい、上にある四角形を押し下げてしまいます。どうしてこれなの？

http://codepen.io/johnnycopes/pen/BKReOq

--- HTML ---

<div class="container"> 
    <div class="shape"> 
    <div class="shape-cover"> 
    </div> 
    </div> 
</div> 

--- CSS ---

body { 
    font-family: Verdana; 
    background: #fff0a5; 
} 

.container { 
    margin: 0 auto 
} 

.shape { 
    margin: 50px auto 0; 
    width: 200px; 
    height: 200px; 
    overflow: hidden; 
    background: #ffb03b; 
} 

.shape-cover { 
    margin: 50px auto 0; 
    height: 200px; 
    width: 200px; 
    background: #468966; 
    transform: translateX(0%); 
    transition: transform .5s ease-in-out; 
} 

.shape-cover:hover { 
    transform: translateX(100%); 
} 

Answer 1

あなたは「オーバーレイの正方形でマージンを使用しているので、それがあります"

形状カバーが形状の内側にあるので、形状カバーの余白はその親に対して相対的になります。

したがって、shape-cover divの余白を削除してみてください。