应用CSS变换时如何影响其他元素：缩放

Question

我在页面上有三个浮动的div元素，全部并排。使用css中的scale方法，我将中间的div缩小到0.5倍，这个功能很好用。

唯一的问题是：缩小这个div不会影响其他div的位置。看起来缩小的div仍然有一个原始规模的不可见容器。所期望的结果是，在缩小后，边距仍然保持不变。

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

是否有一种简单的方法，而不必干扰margin等属性，使得缩放会影响其他div的位置？

- Gijs

Answer 1

这就是CSS 2D变换的设计不幸的地方。

你真正想做的是避免在这个例子中使用CSS变换，而是使用另一种更简单的实现方法。

我已经为您做好了：http://jsfiddle.net/yxYdd/4/

唯一需要改变的是：

.scaleDiv{
    width:75px;
}

这确实产生了您想要的效果。很有趣，不是吗？ :)​

- wnajar

---

不幸的是，这不是我问题的正确解决方案。正如我所提到的，在实际情况中，该div充满了许多其他元素（具有绝对宽度、高度等）。我认为我将不得不编写一些jquery代码来计算其他div的可变位置。@wnajar感谢你的努力！ - Gijs

啊，是的，那些绝对宽度和高度元素肯定会给你带来问题。除非你也要缩放所有其他元素，否则就会出现问题。通常情况下，如果你要像这样缩放东西，最好避免使用绝对宽度和高度。 - wnajar

无论如何，CSS 变换都不会是您的解决方案，因为根据设计，它们不会将物体围绕它们缩放。 - wnajar