在CSS中，我們可以使用transform屬性來對元素進行縮放和旋轉。但是有時候我們需要讓元素繞著中心點進行變換，即讓元素的縮放和旋轉都圍繞著中心點展開。

.box {
width: 100px;
height: 100px;
background-color: red;
transform-origin: center;
}
.box:hover {
transform: scale(1.2) rotate(45deg);
}

在上面的例子中，我們創建了一個名為box的div元素，并設置其寬高、背景色。通過設置transform-origin為center，我們確保元素的縮放和旋轉都是以中心點為基準的。當鼠標懸停在元素上時，我們使用transform屬性將其縮放至原來的1.2倍，同時旋轉45度。

當然，transform-origin屬性的值不僅可以設置為center，還可以設置為其他單位值，比如px、em等。

.box {
width: 100px;
height: 100px;
background-color: red;
transform-origin: 50px 50px;
}
.box:hover {
transform: scale(1.2) rotate(45deg);
}

在上面的例子中，我們將transform-origin設置為50px 50px，也就是將中心點設置在box元素的中心位置。這樣就可以確保元素的縮放和旋轉都是以中心位置為基準的。

總的來說，使用CSS對元素進行縮放和旋轉是非常方便、實用的。當需要圍繞中心點進行變換時，只需要設置好transform-origin屬性即可。