CSS是制作網頁的重要部分，其中一個常用的特性是變形動畫。在這篇文章中，我們將介紹如何使用CSS制作傾斜橢圓旋轉動畫。

/*設置橢圓的樣式*/
.ellipse {
width: 150px;
height: 100px;
border-radius: 50%;
box-shadow: 0 0 5px gray;
position: relative;
}
/*設置動畫*/
.ellipse::before,.ellipse::after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
animation: rotate-ellipse 3s ease-out infinite;
}
/*傾斜橢圓*/
.ellipse::before {
background-color: #b1d4e0;
transform: rotate(-60deg) skew(-30deg);
z-index: 2;
}
/*傾斜橢圓的背景*/
.ellipse::after {
background-color: #8ecae6;
transform: rotate(60deg) skew(-30deg);
z-index: 1;
}
/*旋轉動畫*/
@keyframes rotate-ellipse {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

首先，我們創建了一個橢圓形的容器并設置了樣式。使用偽元素`::before`和`::after`來分別創建兩個橢圓形，分別作為傾斜橢圓和傾斜橢圓的背景。傾斜橢圓使用`transform`屬性來設置橢圓的傾斜度和旋轉度數，`z-index`屬性用于控制順序，讓傾斜橢圓在上面。傾斜橢圓的背景同理。

接著，我們使用`@keyframes`規則設置旋轉動畫，從0度到360度。最后，將動畫應用到偽元素上，讓橢圓和它的背景旋轉。

現在，我們成功地使用CSS制作了傾斜橢圓旋轉動畫！