从中间展开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屋!