使用CSS从中间扩展div而不是上下左侧

Question

我不确定这是否可行,但我认为使用CSS变换来创建一个效果,其中div从其中心扩展到预定的高度和宽度,而不是仅从左上角开始.

例如,如果我有(演示)

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

和(供应商前缀为了简洁而遗漏)

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

在悬停时,这会将方块向右扩展到100px.我想从中间扩展它.

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

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

Answer 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只是改变100px(从110px到210px),那么只有一个margin: -50px仍然可以工作.