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

【问题标题】：Expand div from the middle instead of just top and left using CSS使用 CSS 从中间展开 div 而不是仅从顶部和左侧展开
【发布时间】：2012-01-17 02:59:04
【问题描述】：

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

例如，如果我有 (demo)

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

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

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

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

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

有谁知道无需 javascript 的方法吗？

【问题讨论】：

我认为你需要 javascript 或 jQuery 来做你想做的事

标签： css css-transitions

【解决方案1】：

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

编辑添加选项

选项 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（非正方形），它以矩形开始，在过渡：扩展它周围的元素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 也只改变了 100 像素（所以从 110 像素到 210 像素），那么只有一个 margin: -50px 仍然可以工作。

【讨论】：

如果没有边距怎么办？在我的实际代码中，该元素没有边距：\
@Jason--您需要过渡到负边距。见jsfiddle.net/xcWge/18
所以这太棒了，而且非常接近我正在寻找的东西。最后一点是不是它周围的东西保持静止，而是它实际上调整到元素的大小。我可以有效地实现你正在做的规模（大部分）。但我希望它周围的东西（流动）也能调整它们的位置。
我怀疑你能完全理解。对于浮动示例，您可以影响它之后的元素，但不能影响它之前的元素，而是为 top 和 left 设置动画：jsfiddle.net/xcWge/20。问题是在它确定悬停方块位置之前的元素，它不能确定存在。
@Jason--问题是（如我在上面的评论中所述），要让上面的元素和向左浮动的元素移动，他们需要对它们应用负边距作为过渡，但没有办法通过 css 将它们定位在正方形的悬停上。

【解决方案2】：

您还必须转换它的位置才能执行此操作，将其设置为相对/绝对并在动画时更改 top 值。

（根据评论编辑）

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

【讨论】：

所以是的，这与使用scale() 的问题相同，因为这会将其从文档流中取出。我希望文档的其余部分适应其大小调整。
+1 因为您添加的关于边距的评论帮助我想出了我的解决方案。

【解决方案3】：

您可能必须将您的 div 位置设为绝对位置，然后在悬停时调整左侧和顶部位置。 jsFiddle example

【讨论】：

所以尝试在您的过渡中添加供应商前缀，看看会发生什么 :) 同样，这仍然会产生从左上角扩展的效果：\

【解决方案4】：

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

【讨论】：