在前端開發中，CSS 變形可以為網頁設計師帶來很大的便利。CSS 變形可以讓開發者輕松調整元素的形狀、位置和尺寸，從而為頁面增加動態和交互性。以下是一些有關 CSS 變形的 Demo。

/*改變元素的尺寸*/
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box:hover {
transform: scale(1.5);
/*以元素的中心點進行伸縮*/
}
/*旋轉元素*/
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box:hover {
transform: rotate(45deg);
/*以元素的中心點進行旋轉*/
}
/*平移元素*/
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box:hover {
transform: translateY(-30px);
/*向上移動 30 像素*/
}
/*傾斜元素*/
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box:hover {
transform: skewX(-30deg);
/*水平方向傾斜 30 度*/
}

以上 Demo 展示了 CSS 變形的基本用法，可以通過transform屬性來調整元素的位置、尺寸、形狀和傾斜等。使用 CSS 變形可以讓網頁設計師輕松創建動態和互動的頁面，提高用戶體驗。