圆形 div 围绕中点展开，而不是顶部边缘答案

【问题标题】：Circular div to expand about the middle point, not the top edge圆形 div 围绕中点展开，而不是顶部边缘
【发布时间】：2013-06-06 05:21:38
【问题描述】：

我需要一个圆形 div 围绕中间点展开，而不是顶部边缘！

我有一个 100 x 100 像素的圆，边框半径为 50%

我希望它在悬停时扩展到 500x500，我已经完成了悬停部分。然而，当圆圈扩大时，它会围绕旧的较小圆圈的中点扩大！有没有办法在 :hover 中设置新的中点或指定某个地方等。

代码：

    .circle1
{
margin-top:50%;
margin-right:auto;
margin-left:auto;
width:100px;
height:100px;
border-radius:50%;
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C */  

transition:1s;
-moz-transition: 1s; /* Firefox 4 */
-webkit-transition: 1s; /* Safari and Chrome */
-o-transition: 1s; /* Opera */
-ms-transition: 1s; /* IE9 (maybe) */

}

.circle1:hover
{
width:500px;
height:500px;

}

【问题讨论】：

标签： css

【解决方案1】：

对圆应用相对定位，并在悬停时将其偏移：

.circle1
{
     position:relative;
     /* etc. */
}

.circle1:hover
{
   top:-200px;
   width:500px;
   height:500px;
}

查看实际操作：http://jsfiddle.net/mhfaust/L2McU/

【讨论】：

【解决方案2】：

如果您希望通过尺寸更改来更改布局（其他元素位置），请保留您的解决方案。

如果没有，应用转换：

transform: scale (5, 5);
transform-origin: 50% 50%;

【讨论】：