web-dev-qa-db-ja.com

CSSを使用して、左上ではなく中央からdivを展開します

これが可能かどうかはわかりませんが、CSS変換を使用して、divが左上隅からだけでなく、中心から所定の高さおよび幅に拡大する効果を作成するのはクールだと思いました。

たとえば、（ デモ ）がある場合

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

および（簡潔にするためにベンダープレフィックスは省略されています）

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

ホバーすると、これは正方形を右に、100ピクセルまで拡大します。 中央から展開させたい

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

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

csscss3css-transitions
31
Jason

キーは、式によってマージンを遷移させることです。トランジション中に浮かぶと迷惑な小さな「小刻み」があります。

追加オプションの編集

オプション1：その周りに予約されているスペース内で展開 http://jsfiddle.net/xcWge/14 / ：

#square {
    width: 10px;
    height: 10px;
    margin: 100px; /*for centering purposes*/
    -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; /* initial margin - (width change (and/or height change)/2), so here 100px is initial margin, and the change is (100px final W/H - 10px initial W/H = 90px change, so 100px - (90px / 2 [= 45px]) = 55px) */
}

オプション2：周囲の要素を展開 http://jsfiddle.net/ xcWge/18 / ：

#square {
    width: 10px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    -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; /* 0 - (110px - 10px [= 100px]) / 2 =  -50px */
}

オプション3：フロー内の前の要素を展開し、その後の要素をシフトします http ：//jsfiddle.net/xcWge/22/ ：

#square {
    width: 10px;
    height: 10px;
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    -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; /* initial top[0] - (new height[110px] - initial height[10px] [=100px])/2 [=50px] = -50px) */
    left: -50px; /* initial left[0] - (new width[110px] - initial width[10px] [=100px])/2 [=50px] = -50px) */
    margin-right: -50px;
    margin-bottom: -50px;
}

非正方形の例の追加

これは、非正方形（同じ幅/高さ）では機能しませんが、それは、移行中に各方向で異なる調整を行う必要があることを意味します。だからここにありますオプション2（非正方形）は長方形として始まり、幅トランジション中に高さの2倍に拡大します（したがって、長方形の形状も変わります）：周囲の要素に拡大します http://jsfiddle.net/xcWge/2131/

#rectangle {
    width: 110px;
    height: 10px;
    margin: 0; /*for centering purposes*/
    -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;
}
#rectangle:hover {
    width: 310px;
    height: 110px;
    margin: -50px -100px; /* initial margin - ((initial margin - width change (or height change))/2) */
}

widthが100pxだけ変化する場合（110pxから210pxに）、margin: -50pxはまだ機能していました。

63
ScottS

これも同様に行うために位置を遷移させ、相対/絶対に設定し、top値をアニメーション化するときに変更する必要があります。

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

絶対配置の代わりに、負の上部マージンで同じようなことをしようとすることができます。それはドキュメントフローにそれを保持します。ただし、どういうわけか、実際にdivを移動し、高さ/幅をアニメーション化する必要があります。

2
idrumgood

div位置を絶対位置にし、ホバーで左と上の位置を調整する必要がある場合があります。 jsFiddleの例

1
ONYX

ホバーの上部と左の配置も調整することでこれを行います。例：幅に50ピクセルを追加し、25ピクセル左に移動して、中央から拡大する全体的な効果を与えます。

0
bennett_an