CSS 塊狀元素是頁面布局中最常用的元素之一。通過 CSS 樣式，我們可以控制塊狀元素的大小、位置、顏色、背景等屬性。但是，有時候我們需要將塊狀元素變形為其他形狀，比如圓形、梯形、菱形等等。這時候，我們就可以使用 CSS3 的 transform 屬性來實現。

div {
width: 100px;
height: 100px;
background-color: red;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

在上述代碼中，我們將一個寬高為 100px 的紅色 div 元素旋轉了 45 度。注意，該代碼中使用了瀏覽器前綴，因為在一些老舊的瀏覽器中，可能不支持 transform 屬性。

transform 屬性不僅可以旋轉元素，還可以實現其它各種形狀的變換，比如傾斜、縮放、移動等。下面是一個實現梯形的代碼示例：

div {
width: 100px;
height: 0px;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-bottom: 0px solid transparent;
border-left: 50px solid transparent;
-webkit-transform: skew(-10deg);
-moz-transform: skew(-10deg);
transform: skew(-10deg);
}

上述代碼中，我們使用 border 屬性設置了一個上邊框為紅色的三角形，再通過 skew 屬性將其傾斜形成梯形。

總之，通過 transform 屬性，我們可以很輕松地實現各種各樣的塊狀元素形狀變換，從而實現頁面創意布局的效果。