CSS3旋轉(zhuǎn)飛機是一個很有趣的CSS3特效，可以為網(wǎng)站增添不少互動性和活力。本文將介紹如何使用CSS3實現(xiàn)旋轉(zhuǎn)動畫，以及如何將飛機樣式應用到動畫中。

.plane {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(-45deg) translate(-50%, -50%);
animation: fly 5s linear infinite;
}
@keyframes fly {
0% {
transform: rotate(-45deg) translate(-50%, -50%);
opacity: 1;
}
50% {
transform: rotate(135deg) translate(-50%, -50%);
opacity: 0.5;
}
100% {
transform: rotate(315deg) translate(-50%, -50%);
opacity: 1;
}
}

上面的代碼中，我們先定義了一個樣式為.plane的元素，設置了它的基礎樣式，包括寬、高、邊框等屬性，以及一個rotate(-45deg) translate(-50%, -50%)的transform屬性，將飛機旋轉(zhuǎn)并定位在頁面中心。接下來，我們定義了一個名為fly的關鍵幀動畫，在動畫中分別讓飛機旋轉(zhuǎn)到不同的角度，并設置了不同的透明度，讓飛機看起來像在不斷飛行。

最后，我們將fly動畫應用到.plane元素上，設置它的動畫持續(xù)時間為5秒，并且無限循環(huán)播放。這樣就完成了一個簡單的CSS3旋轉(zhuǎn)飛機特效。