CSS 从中心成长
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7897208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Grow from center
提问by Coughlin
I have been trying to get the bottom circles to grow in Firefox (need to add in other prefixes, still in dev)
我一直在尝试让底部的圆圈在 Firefox 中成长（需要添加其他前缀，仍在开发中）
They are behaving properly, but my goal is to get them to grow from the center. Any ideas on how i can use CSS to do that? Would it be a positioning thing? The link is here: http://www.catonthecouch.com/feline/
他们表现得很好，但我的目标是让他们从中心成长。关于如何使用 CSS 来做到这一点的任何想法？会不会是定位问题？链接在这里：http: //www.catonthecouch.com/feline/
I am simply growing the width/height on hover.
我只是在悬停时增加宽度/高度。
回答by JCM
If you are using CSS3, you can use the property transform, and scale the element.
如果您使用的是 CSS3，您可以使用属性转换，并缩放元素。
Obs: I have omitted the prefixes to avoid too much code, but you should use them.
Obs：我省略了前缀以避免代码过多，但您应该使用它们。
.circle {
width: 500px;
height: 500px;
border-radius: 100%;
transform: scale(0.1); /* 1/10 of the original size */
transition: all 1s ease-in-out;
}
.circle.opened {
transform: scale(1);
}
Working demo: http://jsfiddle.net/JCMais/eKs59/
回答by SLaks
Add negative left and top margins equal to half of the change in size (-15px)
添加等于大小变化的一半的负左边距和顶部边距 ( -15px)
