应用 CSS 变换时影响其他元素：缩放答案

【问题标题】：Effect other elements while applying CSS transform: scale应用 CSS 变换时影响其他元素：缩放
【发布时间】：2012-05-30 05:16:48
【问题描述】：

我在一个页面上有三个 div，全部并排浮动。使用 css scale 方法，我将最中间的 div 缩放到 0.5。这很好用。

唯一的问题是缩放 div 不会影响其他 div 的位置。似乎缩放的 div 仍然具有原始比例的不可见容器。期望的结果是缩放后边距保持不变。

我添加了一个示例：http://jsfiddle.net/yxYdd/3/（实际上，最中间的 div 填充了很多其他元素）

有没有一种简洁的方法，不弄乱边距等，这样缩放会影响其他div的定位？

【问题讨论】：

【解决方案1】：

不幸的是，这就是 CSS 2D 转换的设计方式。

您真正想要做的是避免在此示例中使用 CSS 转换，而是使用另一种更简单的实现。

我在这里为你完成了这个：http://jsfiddle.net/yxYdd/4/

你真正需要的唯一改变是：

.scaleDiv{
    width:75px;
}

这确实会产生您想要的效果。这不是很好笑吗？ :)

【讨论】：

不幸的是，这不是解决我问题的正确方法。正如我所提到的，真实情况下的 div 充满了许多其他元素（具有绝对宽度、高度等）。我想我将不得不编写一些 jquery 代码来计算其他 div 的变量位置。 @wnajar 感谢您的努力！
啊，是的，那些绝对的宽高元素肯定会给你带来麻烦。除非你也打算扩展所有其他元素，否则就会出现问题。一般来说，如果您要进行这样的缩放，最好避免使用绝对宽度和高度。
无论如何，CSS 转换不会成为您的解决方案，因为上述原因在设计上它们不会缩放周围的东西。