从中间展开div而不是使用CSS顶部和左侧
我不确定这是否可行，但是我认为使用CSS转换来创build一个效果，其中div从中心扩展到预定的高度和宽度，而不仅仅是从左上angular。
例如，如果我有（ 演示 ）
<div id="square"></div> 和（供应商前缀为简洁起见）
#square { width: 10px; height: 10px; background: blue; transition: width 1s, height 1s; } #square:hover { width: 100px; height: 100px; }
hover时，这会将广场向右扩展至100px。 我想从中间扩展。
我知道我可以使用transform: scale(x) （ demo ），但是这并不能真正为我提供一个非常“像素完美”的布局（因为它是基于百分比的），也不会影响周围的布局（使文档stream中的其他元素调整为resize）。 这基本上是我想要做的，除非文档stream受到相应的影响。
有没有人知道的方式来做到这一点没有JavaScript ？
关键是通过一个公式过渡保证金。 如果漂浮的话，在转换过程中会有一些令人讨厌的“摆动”。
编辑添加选项
选项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/ ：
#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; }
你必须转换它的位置才能做到这一点，将其设置为相对/绝对值，并在animation中改变top值。
（根据评论编辑）
而不是绝对的定位，你可以尝试做一个负面的上边距同样的事情。 这将保持在文档stream程中。 但不知何故，你需要实际移动div以及animation的高度/宽度。
你可能必须让你的div位置绝对，然后调整hover的左侧和上方的位置。 jsFiddle的例子
我通过调整hover的顶部和左侧alignment方式来做到这一点。 例如：我会在宽度上添加50像素，并将其向左移动25像素，以便从中间显示全部效果。
