CSS3動(dòng)畫在現(xiàn)代Web設(shè)計(jì)中變得越來(lái)越普遍。其中最常見的是縮放和旋轉(zhuǎn)動(dòng)畫。這兩種動(dòng)畫可以通過(guò)CSS3實(shí)現(xiàn)，使Web頁(yè)面更加時(shí)尚，吸引人眼球。

/* 縮放動(dòng)畫 */
.box {
transition: all 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.2);
}

上述代碼展示了一個(gè)簡(jiǎn)單的縮放動(dòng)畫。將鼠標(biāo)懸停在元素上時(shí)，該元素將縮放1.2倍。

/* 旋轉(zhuǎn)動(dòng)畫 */
.box {
transition: all 0.3s ease-in-out;
}
.box:hover {
transform: rotate(360deg);
}

上述代碼展示了一個(gè)簡(jiǎn)單的旋轉(zhuǎn)動(dòng)畫。當(dāng)鼠標(biāo)懸停在元素上時(shí)，該元素將以360度的方式旋轉(zhuǎn)。

此外，屬性transform-origin用于定義動(dòng)畫的起始點(diǎn)，從而產(chǎn)生更復(fù)雜的效果。

/* 縮放和旋轉(zhuǎn)動(dòng)畫 */
.box {
transition: all 0.3s ease-in-out;
transform-origin: center;
}
.box:hover {
transform: scale(1.5) rotate(360deg);
}

此代碼展示了一個(gè)同時(shí)實(shí)現(xiàn)縮放和旋轉(zhuǎn)的動(dòng)畫。鼠標(biāo)懸停在元素上時(shí)，元素將以縮放1.5倍并360度旋轉(zhuǎn)。

CSS3動(dòng)畫是吸引人眼球的有效方式，可以提高網(wǎng)站的用戶體驗(yàn)。縮放和旋轉(zhuǎn)動(dòng)畫是CSS3中最常見和易于實(shí)現(xiàn)的動(dòng)畫。學(xué)習(xí)和掌握這些動(dòng)畫可以使Web設(shè)計(jì)變得更加生動(dòng)有趣。