使用 CSS 从中间展开 div 而不是顶部和左侧

Expand div from the middle instead of just top and left using CSS

提问by Jason

I'm not sure if this is possible, but I thought it would be cool using CSS transforms to create an effect where a div expands from its center to a predetermined height and width, rather than just from the upper left corner.

我不确定这是否可行，但我认为使用 CSS 转换来创建 div 从其中心扩展到预定高度和宽度的效果会很酷，而不仅仅是从左上角扩展。

For instance, if I have (demo)

例如，如果我有（演示）

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

and (vendor prefixes left out for brevity)

和（为简洁起见省略了供应商前缀）

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

On hover, this will expand the square to the right and down to 100px. I would like to have it expand from the middle.

在悬停时，这会将正方形向右扩展并向下扩展到 100 像素。我想让它从中间扩展。

I'm aware that I could probably use transform: scale(x)(demo), but this doesn't really provide me with a very "pixel perfect" layout (as it is percentage-based), and it also does not affect the surrounding layout (make other elements that are in the document flow adjust to its resizing). This is essentially what I want to do, except with the document flow affected accordingly.

我知道我可能会使用transform: scale(x)（演示），但这并没有真正为我提供非常“像素完美”的布局（因为它是基于百分比的），而且它也不会影响周围的布局（使其他文档流中的元素会根据其大小调整进行调整）。这基本上就是我想要做的，除了相应地影响文档流。

Does anyone know of a way to do this without javascript?

有没有人知道没有 javascript 的方法？

回答by ScottS

The key is to transition the margin by a formula. There is a little "wiggle" that is annoying during the transition if it is floated.

关键是通过公式来过渡边距。如果它是浮动的，那么在过渡期间会有一点令人讨厌的“摆动”。

EDITED ADDING OPTIONS

编辑添加选项

Option 1: Expands within space reserved around it http://jsfiddle.net/xcWge/14/:

选项 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) */
}

Option 2: Expands over elements around it http://jsfiddle.net/xcWge/18/:

选项 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 */
}

Option 3: Expands over elements before it in flow and shifts elements after it http://jsfiddle.net/xcWge/22/:

选项 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;
}

ADDED NON-SQUARE EXAMPLE

添加的非正方形示例

A comment was made this does not work for a non-square (same width/height), but that just means one has to adjust differently for each direction during the transition. So here is Option 2 (with non-square)that starts as a rectangle, and the width expands twice as much as the height (so changes rectangle shape even) during the transition: Expands over elements around it http://jsfiddle.net/xcWge/2131/

发表评论这不适用于非正方形（相同的宽度/高度），但这只是意味着在过渡期间必须对每个方向进行不同的调整。所以这里是选项 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) */
}

If the widthwere only changing by 100px also (so from 110px to 210px), then just a margin: -50pxwould have still worked.

如果width也仅改变 100 像素（因此从 110 像素变为 210 像素），那么仅 amargin: -50px仍然有效。

回答by idrumgood

You'll have to transition it's position in order to do this as well, setting it to relative/absolute and changing the topvalue as it animates.

您还必须转换它的位置才能做到这一点，将其设置为相对/绝对并在top动画播放时更改该值。

(edit based on comment)

（根据评论编辑）

Instead of absolute positioning, you could try to do the same sort of thing with a negative top margin. That would keep it in the document flow. Somehow, though, you need to actually move the div as well as animating the height/width.

除了绝对定位，您还可以尝试使用负上边距做同样的事情。这会将其保留在文档流中。但是，不知何故，您需要实际移动 div 以及动画高度/宽度。

回答by ONYX

you may have to make you're div position absolute and then adjust the left and top position on hover. jsFiddle example

您可能必须使您的 div 位置绝对，然后在悬停时调整左侧和顶部位置。jsFiddle 示例

回答by bennett_an

I do this by adjusting the top and left alignment on hover also. Ex: i'll add 50 px to the width and move it left 25px to give the over all effect of it expaning from the middle.

我也通过调整悬停时的顶部和左侧对齐来做到这一点。例如：我将向宽度添加 50 像素并将其向左移动 25 像素，以提供从中间扩展的整体效果。