CSS 的 scale 屬性可以讓我們對元素進行縮放。它可以被用來制作響應式布局和動畫等效果。

/* 縮放元素 */
.box {
transform: scale(0.5);
}

但是當我們對一個含有子元素的元素進行縮放時，子元素也會跟著一起縮放，這可能會破壞布局和樣式。解決這個問題的方法是使用另一個 CSS 屬性，transform-origin，來指定縮放的中心點。

/* 縮放元素并指定中心點為左上角 */
.box {
transform: scale(0.5);
transform-origin: top left;
}
/* 縮放元素并指定中心點為右下角 */
.box {
transform: scale(0.5);
transform-origin: bottom right;
}

使用 transform-origin 我們可以縮放元素而不影響子元素的布局和樣式。