做一个DIV与CSS所有的方向生长？(Make a div grow in all directio

我有一个HTML / CSS页面，其中我有呈圆形的主体4个格。 我做了这么这些div规模增长上徘徊。 它进入到下一行，当浏览器窗口大小不同（仍然努力工作了这一点）这工作，除了某些情况下的罚款。 但是，我想我们该做的是让它所以当DIV生长在盘旋，它生长在各个方向，而不是成长向右和向下，因为它是目前正在做。 有谁知道这样做的解决？

这里是一个sitepage链接： http://www.somil.site90.net

这里是圆的一个代码。 其他3个是除了利润是相同的，但让我知道如果你要我贴的也是如此。 提前致谢！

#circ1 {
  background: #c4c4c4;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  position: relative;
  margin: 100px 0px 100px 16%;
  float: left;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;


}

#circ1:hover {
  width: 250px;
  height: 250px;

}

Answer 1:

简单，只需使用CSS3。

#circ1:hover {
  -webkit-transform: scale(1.5); 
      -ms-transform: scale(1.5); 
          transform: scale(1.5);
}

此代码将增长的div。 保证金

   #circ1:hover + #circ2{
   margin: 100px 0px 100px 8%; 
   }

Answer 2:

你很接近; 你已经拥有了相对定位。 现在，所有你需要做的是移动DIV起来的左上角和左边。

由于悬停大小为100px的大，你将需要50像素（一半）来移动DIV。

#circ1:hover {
  width: 250px;
  height: 250px;
  top:-50px;
  left:-50px;
}

就这样！

Answer 3:

看看CSS3变换得到你想要的东西。 你需要一些供应商前缀和，但只要你不试图支持IE 8下，你应该能够用它来逃脱。

您将要使用scale 。 也有3D转换，但他们不太支持。

文章来源: Make a div grow in all directions with CSS?