使用 CSS 让 div 向各个方向增长？答案

【问题标题】：Make a div grow in all directions with CSS?使用 CSS 让 div 向各个方向增长？
【发布时间】：2014-07-13 02:14:42
【问题描述】：

我有一个 HTML/CSS 页面，其中主体中有 4 个 div，形状像圆形。我已经做到了，所以这些 div 的大小在悬停时会增长。这工作正常，除了某些情况下它转到下一行并且浏览器窗口大小不同（仍在尝试解决）。然而，我想做的事情是当 div 在悬停时增长时，它会向各个方向增长，而不是像当前那样向右和向下增长。有谁知道解决这个问题？

这是一个网站页面的链接：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;

}

【问题讨论】：

CSS3 scale 是更好的选择。

标签： html css web

【解决方案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%; 
   }

【讨论】：

太棒了！只有一件事。当我使用比例时，边距保持不变，因此其他 div 不会像我希望的那样相互交互。有没有办法让边距随着对象的缩放而移动？
@drsom 我认为没有人可以通过共享信息走得更远。如果您正在寻找一种与您所拥有的一切完美配合的解决方案，那么请包含一个最小的演示，例如 jsfiddle 或重现该演示所需的代码并解释所需的行为。
@drsom #circ1:hover + #circ2{ margin: 100px 0px 100px 8%; }

【解决方案2】：

你很亲密；你已经有了相对定位。现在您需要做的就是将 div 的左上角向上和向左移动。

由于悬停时的尺寸大了 100 像素，因此您需要将 div 移动 50 像素（一半）。

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

就是这样！

【讨论】：

非常酷，但无论如何要做到这一点，这样 div 就不会“闪烁”到左侧，因为平滑过渡似乎对此不起作用。

【解决方案3】：

看看CSS3 Transforms 是否能得到你想要的。您将需要一些供应商前缀，但只要您不尝试支持 IE 8 及以下版本，您应该能够摆脱它。

您需要使用scale。还有 3D 变换，但支持较少。

【讨论】：