Transform：scale issue

Question

私はdivを持っていて、ホバリング（ただY）でスケーリングしようとしています。問題は、transitionなしでうまく動作することです。私がtransitionを使用するとき、divは上から少しスケールして行くdivを避ける方法はどうですか？私はそれを上にバウンスすることなく、まっすぐにスケールしたいです。 http://jsfiddle.net/q9akawr6/21/

HTML

<div></div> 

CSS

div{ 
    width:100px; 
    height:100px; 
    margin:100px; 
    background-color:red; 
    transition:.2s; 
} 
div:hover 
{ 
    transition:.2s; 
    transform-origin:top; 
    transform:scaleY(2.0); 
} 

Answer 1

Nietは述べている、または単にdiv:hover{}のではなく、div{}規則でこれを入れたよう：

transition:.2s; 
transform-origin:top; 

を同じ理由（変換 - 間違った時に起源）。

Answer 2

あなたが余白領域のためにバウンスするdiv。私はあなたのコードを変更しようとします。

<div class="container"> 

<div class="demo"></div> 

</div> 

CSS：以下

HTMLチェック

div.container 
{ 
    width:300px; 
    height:300px; 
    border:1px solid gray; 
} 
div.demo{ 
    width:100px; 
    height:50px; 
    margin: 100px auto; 
    background-color:red; 
    transition:.2s; 
    transform-origin: left top; 
} 
div.demo:hover 
{ 
    transition:all .2s linear; 
    transform-origin: top; 
    transform:scaleY(2.0); 
}