divをCSSを使用して上から左に移動するのではなく、中央からdivを展開する

Question

これが可能かどうかわかりませんが、CSS変換を使用してdivを中心から所定の左上隅からではなく、高さと幅を指定します。私が持っている場合例えば

は、（demo）

<div id="square"></div> 

と

#square { 
    width: 10px; 
    height: 10px; 
    background: blue; 
    transition: width 1s, height 1s; 
} 
#square:hover { 
    width: 100px; 
    height: 100px; 
} 

ホバーで、これは右へとまで平方を拡大していきます（ベンダープレフィックスは、簡潔にするために省略しました） 100px 私はそれを真ん中から広げたいと思っています。

私はおそらくtransform: scale(x)（demo）を使用することができることを承知しているが、これは実際には非常に「ピクセル完璧な」レイアウト（それはパーセンテージベースであるとして）を私に提供していない、それはまた影響を与えません。周囲のレイアウト（文書フローにある他の要素をそのサイズ変更に合わせる）これは本質的に私がやりたいことですが、それに応じて影響を受ける文書フローを除きます。

誰でもこれを行う方法を知っていますかjavacriptなし？

Answer 1

キーは、数式でマージンを移行することです。それが浮かんでいる場合、移行中に迷惑をかけている小さな「揺れ」があります。それhttp://jsfiddle.net/xcWge/14/周囲に確保されたスペース内で膨張：

#square { 
    width: 10px; 
    height: 10px; 
    margin: 100px; /*for centering purposes*/ 
    background: blue; 
    -webkit-transition: width 1s, height 1s, margin 1s; 
    -moz-transition: width 1s, height 1s, margin 1s; 
    -ms-transition: width 1s, height 1s, margin 1s; 
    transition: width 1s, height 1s, margin 1s; 
} 
#square:hover { 
    width: 100px; 
    height: 100px; 
    margin: 55px; /* inital margin - ((intial margin - width (or height))/2) */ 
} 

オプション2：それhttp://jsfiddle.net/xcWge/18/周りの要素の上に展開：

EDITEDオプションを

オプション1を添加します

#square { 
    width: 10px; 
    height: 10px; 
    margin: 0; /*for centering purposes*/ 
    background: blue; 
    -webkit-transition: width 1s, height 1s, margin 1s; 
    -moz-transition: width 1s, height 1s, margin 1s; 
    -ms-transition: width 1s, height 1s, margin 1s; 
    transition: width 1s, height 1s, margin 1s; 
} 
#square:hover { 
    width: 110px; 
    height: 110px; 
    margin: -50px; /* inital margin - ((intial margin - width (or height))/2) */ 
} 

オプション3：流れの中で、それ以前の要素の上に展開され、それhttp://jsfiddle.net/xcWge/22/後の要素をシフト：

#square { 
    width: 10px; 
    height: 10px; 
    margin: 0; 
    position: relative; 
    top: 0; 
    left: 0; 
    background: blue; 
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ; 
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
} 
#square:hover { 
    width: 110px; 
    height: 110px; 
    top: -50px; /* inital top- (intial top-height)/2) */ 
    left: -50px; /* inital left- (intial left-width)/2) */ 
    margin-right: -50px; 
    margin-bottom: -50px; 
} 

Answer 2

これを行うには相対的/絶対的に設定し、topの値を変更するためにその位置を遷移させる必要があります。

（コメントに基づいて編集）

代わりに絶対位置の、あなたは負の上マージンとの事の同じ種類を行うために試みることができます。それがドキュメントフローに保持されます。しかし、何とか実際にdivを動かして高さ/幅をアニメーション化する必要があります。

Answer 3

これを行うには、ホバー上の左揃えと右揃えを調整します。例：幅に50ピクセルを追加し、25ピクセル左に移動して、中央から広がるすべての効果を上げます。

Answer 4

あなたは絶対位置をdivにして、ホバーの左と上の位置を調整する必要があります。 jsFiddle example