Question

使用transform: scale()属性时，即使在缩放之后，彼此相邻的元素也会像它们的全尺寸对应物一样。

如此处所示：http://jsfiddle.net/a4BMK/1/（点击按钮）

是否有一个属性可以调整元素的大小，然后重新浮动它们以便它们再次相互接触？

顺便说一句，我使用的真实元素是所有不同宽度和高度的模型，因此在所有元素中使用width:或height:并不是一个简单的解决方案。

Answer 1

简而言之，没有，根据我所知道的缩放值，没有CSS定位方式。

但是，我确实知道如何使用解决方法来补偿（不使用任何javascript）。除了比例之外，您还可以使用translateX(-25%)将所有这些比例放在一起。话虽如此，每个元素的百分比增加，以补偿被移动的另一个元素。这意味着您必须使用一定数量的元素或可能使用预处理器来补偿

.img:nth-child(1) {
    transform: scale(.8);
}
.img:nth-child(2) {
    transform: scale(.8) translateX(-25%);
}
.img:nth-child(3) {
    transform: scale(.8) translateX(-50%);
}
.img:nth-child(4) {
    transform: scale(.8) translateX(-75%);
}
.img:nth-child(5) {
    transform: scale(.8) translateX(-100%);
}
img {
    float:left;
    transform-origin: top left;
}

Demo

使用CSS变换比例保持原始定位

1 个答案: