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

Question

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

我有一个 100px x 100px 的圆，边框半径为 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;

}

Answer 1

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

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

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

看看它的实际效果：http: //jsfiddle.net/mhfaust/L2McU/

Answer 2

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

如果没有，请应用转换：

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