矩形和圓是兩種最基本的圖形，在頁面設計和開發中經常會涉及到這兩個形狀。在 CSS3 中，我們可以使用動畫效果將圓形轉換為矩形，并實現過渡效果。

實現這個效果的方法是使用 CSS3 中的border-radius屬性和transform:rotate()屬性。

首先，我們需要創建一個圓形。可以使用如下代碼：

.circle{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #FAD7A0;
}

然后，我們需要創建一個矩形，可以使用如下代碼：

.rectangle{
width: 200px;
height: 200px;
background-color: #FAD7A0;
}

現在，我們需要實現圓形到矩形的過渡效果。此時，我們需要使用@keyframes規則。

@keyframes circle-to-rectangle {
0% {
border-radius: 50%;
transform: rotate(0deg);
}
100% {
border-radius: 0%;
transform: rotate(45deg);
}
}

這段代碼定義了從圓形到矩形的過渡效果。其中，0%表示動畫的起始狀態，100%表示動畫的結束狀態。

現在，我們需要將動畫應用到元素上。可以使用如下代碼：

.circle{
animation-name: circle-to-rectangle;
animation-duration: 2s;
animation-fill-mode: forwards;
}

這段代碼將動畫應用到圓形元素上。其中，animation-name屬性指定動畫的名稱，animation-duration屬性指定動畫的持續時間，animation-fill-mode屬性指定動畫結束后元素的狀態。

至此，我們就完成了圓形到矩形的過渡效果。通過這個例子，我們可以學習到如何使用 CSS3 實現簡單的動畫效果。