擴大響應方形佈局的正方形

Question

我已經使用寬度和填充底部創建了響應方形網格。我想創建一個懸停效果，其中徘徊的廣場會略微放大。然而，我試過的方式會讓整個佈局在廣場懸停時變得混亂。我試圖讓更多的空間通過改變邊緣，當徘徊，但這並沒有改變任何東西。

這裏是我的代碼的jsfiddle：https://jsfiddle.net/p3tcog0o/

HTML：

<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 
<div class="square"></div> 

CSS：

.square{ 
    width:15%; 
    padding-bottom:15%; 
    background-color:red; 
    float:left; 
    margin:3%; 
    transition: .5s width, .5s padding-bottom; 

} 
.square:hover{ 
    width:16%; 
    padding-bottom:16%; 
    margin:2%; 
} 

Answer 1

您可以使用transform: scale()

.square{ 
 
    width:15%; 
 
    padding-bottom:15%; 
 
    background-color:red; 
 
    float:left; 
 
    margin:3%; 
 
    transition: .5s width, .5s padding-bottom, .5s transform; 
 
} 
 
.square:hover{ 
 
    transform: scale(1.5); 
 
}

<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div>