使用CSS變換比例保持原始位置

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