在CSS3中，我們可以通過(guò)transform屬性來(lái)實(shí)現(xiàn)各種動(dòng)畫(huà)效果，其中包括旋轉(zhuǎn)動(dòng)畫(huà)。旋轉(zhuǎn)動(dòng)畫(huà)的實(shí)現(xiàn)需要指定旋轉(zhuǎn)的角度，下面我們來(lái)看一下如何在CSS3動(dòng)畫(huà)中實(shí)現(xiàn)旋轉(zhuǎn)角度。

/* 基礎(chǔ)樣式 */
.box {
width: 100px;
height: 100px;
background-color: red;
}
/* 旋轉(zhuǎn)45度動(dòng)畫(huà) */
.rotate-45 {
transform: rotate(45deg);
}
/* 旋轉(zhuǎn)90度動(dòng)畫(huà) */
.rotate-90 {
transform: rotate(90deg);
}
/* 旋轉(zhuǎn)180度動(dòng)畫(huà) */
.rotate-180 {
transform: rotate(180deg);
}
/* 旋轉(zhuǎn)360度動(dòng)畫(huà) */
.rotate-360 {
animation: rotate 2s linear infinite;
}
/* 360度無(wú)限循環(huán)動(dòng)畫(huà) */
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

在上面的代碼中，我們定義了4種旋轉(zhuǎn)動(dòng)畫(huà)效果，分別旋轉(zhuǎn)了45度、90度、180度和360度。其中旋轉(zhuǎn)45度、90度和180度的動(dòng)畫(huà)是通過(guò)直接設(shè)置transform的rotate屬性實(shí)現(xiàn)的，而360度的動(dòng)畫(huà)則是通過(guò)@keyframes關(guān)鍵字定義的動(dòng)畫(huà)來(lái)實(shí)現(xiàn)的。

在使用@keyframes定義動(dòng)畫(huà)時(shí)，我們需要指定動(dòng)畫(huà)的時(shí)間、動(dòng)畫(huà)的效果以及動(dòng)畫(huà)的循環(huán)次數(shù)等。在這個(gè)例子中，我們?cè)O(shè)置了一個(gè)2秒的動(dòng)畫(huà)，以線性的方式循環(huán)無(wú)數(shù)次，從0%的角度開(kāi)始旋轉(zhuǎn)，到100%旋轉(zhuǎn)了360度結(jié)束。

以上就是CSS3動(dòng)畫(huà)中旋轉(zhuǎn)角度的實(shí)現(xiàn)方式。通過(guò)設(shè)置transform屬性和@keyframes關(guān)鍵字，我們可以輕松實(shí)現(xiàn)各種旋轉(zhuǎn)效果，讓網(wǎng)頁(yè)動(dòng)起來(lái)！