从中间展开div，而不是使用CSS顶部和左边 [英] Expand div from the middle instead of just top and left using CSS

问题描述

我不知道这是否可能，但我认为使用CSS变换创建一个效果，其中一个div从其中心扩展到一个预定的高度和宽度，而不是只从左上角。

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.

例如，如果我有（演示）

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

悬停时，会将正方形向右扩展，最小为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.

我知道我可以使用 transform： scale（x）（演示），但这并不真的提供给我非常像素完美布局（因为它是基于百分比），并且它也不影响周围的布局（使文档流中的其他元素适应其大小调整）。这实际上是我想要做的，除非文档流相应地受到影响。

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.

有没有人知道一个方法没有javascript ？

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

推荐答案

关键是通过公式转换边距。

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.

已编辑添加选项

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

这篇关于从中间展开div，而不是使用CSS顶部和左边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！