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

我不确定这是否可行，但我认为使用 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;
}

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

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

有谁知道有什么方法可以做到这一点没有 JavaScript?

关键是通过公式来转换边距。如果它是浮动的，那么在转换过程中会有一点点“摆动”，这会很烦人。

编辑添加选项

Option 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：扩展到其周围的元素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：在流中扩展其之前的元素并移动其之后的元素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) */
}

If the width也只改变了 100px（所以从 110px 到 210px），然后只是margin: -50px仍然有效。