在制作Web動(dòng)畫時(shí)，使用CSS旋轉(zhuǎn)動(dòng)畫可以為網(wǎng)頁(yè)增加不少活力和動(dòng)感。不過(guò)，在實(shí)際制作中，很多人會(huì)發(fā)現(xiàn)旋轉(zhuǎn)動(dòng)畫會(huì)出現(xiàn)偏離現(xiàn)象，讓人十分苦惱。

偏離現(xiàn)象指的是，在進(jìn)行旋轉(zhuǎn)動(dòng)畫時(shí)，元素的中心點(diǎn)與原點(diǎn)的位置發(fā)生了偏離，導(dǎo)致旋轉(zhuǎn)軌跡不理想，呈現(xiàn)出一種不協(xié)調(diào)的效果，影響了整個(gè)網(wǎng)頁(yè)的視覺效果。

其實(shí)，偏離現(xiàn)象的產(chǎn)生有很多原因，其中，最常見的一種原因是在進(jìn)行平移和旋轉(zhuǎn)操作時(shí)，沒有設(shè)定好元素的定位點(diǎn)。比如，以下是一段簡(jiǎn)單的CSS旋轉(zhuǎn)動(dòng)畫代碼：

.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

通過(guò)這段代碼，我們可以給一個(gè)元素添加一個(gè)旋轉(zhuǎn)動(dòng)畫，但是如果這個(gè)元素沒有設(shè)定好定位點(diǎn)，就會(huì)出現(xiàn)偏離問(wèn)題。比如，如果我們想讓這個(gè)元素的中心點(diǎn)為旋轉(zhuǎn)點(diǎn)，那么可以使用如下代碼：

.box {
width: 100px;
height: 100px;
background-color: #f00;
animation: rotate 2s linear infinite;
transform-origin: 50% 50%;
}

在這段代碼中，我們使用了tranform-origin屬性來(lái)設(shè)定元素的定位點(diǎn)，這里我們將中心點(diǎn)設(shè)置在了50%的位置，這樣就可以避免出現(xiàn)偏離現(xiàn)象。

當(dāng)然，偏離現(xiàn)象的原因還有很多，比如元素的大小改變、瀏覽器兼容性問(wèn)題等等，因此，在進(jìn)行旋轉(zhuǎn)動(dòng)畫時(shí)，一定要注意這些問(wèn)題，才能保證旋轉(zhuǎn)動(dòng)畫的效果和流暢度。