在前端開發中，遇到了很多布局問題。其中，一個常見的問題是如何在不失真的情況下，將元素變形成正方形。這時，我們可以使用 CSS 來實現正方形放大效果。

.square {
width: 100px;
height: 100px;
background-color: #f00;
transition: transform 0.5s;
}
.square:hover {
transform: scale(1.2);
}

以上代碼展示了如何使用 CSS 來實現正方形放大效果。我們可以先設置一個寬高相等的元素，這里使用了一個 class 為 square 的元素來進行實現。接著，通過設置 transform 屬性來控制元素的縮放比例。在這個例子中，我們設置元素在鼠標懸停時放大到原來的 1.2 倍。

除了使用 transform 屬性，我們也可以使用 padding 和 line-height 屬性來使元素變成正方形。例如：

.square {
width: 100px;
height: auto;
padding-bottom: 100%;
background-color: #f00;
transition: transform 0.5s;
}
.square:hover {
transform: scale(1.2);
}

這段代碼中，我們設置一個寬度固定為 100 像素的元素，高度為自適應高度。接著，通過設置 padding-bottom 屬性為 100% 來使元素的高度等于其寬度。這里也使用了 transform 屬性來在鼠標懸停時放大元素。

以上介紹了如何使用 CSS 來實現正方形放大效果。不同的布局問題，我們可以通過不同的 CSS 屬性和技巧來解決。希望本文對您有所啟示。