CSS中的transform屬性提供了多種實(shí)現(xiàn)旋轉(zhuǎn)動(dòng)畫的方式，其中最常用的是繞著中心點(diǎn)旋轉(zhuǎn)，即通過(guò)設(shè)置transform-origin為center來(lái)實(shí)現(xiàn)。

.box {
transform-origin: center;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

除了繞著中心點(diǎn)旋轉(zhuǎn)外，我們還可以通過(guò)設(shè)置transform-origin為其他位置來(lái)實(shí)現(xiàn)繞著不同點(diǎn)旋轉(zhuǎn)，如top、left、bottom、right等。

.box {
transform-origin: left;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

如果要實(shí)現(xiàn)在不同時(shí)間點(diǎn)繞著不同的點(diǎn)進(jìn)行旋轉(zhuǎn)，可以通過(guò)關(guān)鍵幀（@keyframe）來(lái)實(shí)現(xiàn)。

.box {
animation: rotate 4s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
transform-origin: left;
}
50% {
transform: rotate(180deg);
transform-origin: bottom;
}
100% {
transform: rotate(360deg);
transform-origin: right;
}
}

除了旋轉(zhuǎn)外，transform還有很多其他的變形效果，如縮放、平移、傾斜等。可以通過(guò)設(shè)置不同的值來(lái)實(shí)現(xiàn)不同的效果。

.box {
transform: scale(1.5, 1.5) skew(30deg, 20deg) translate(50px, 50px);
}

所有支持transform屬性的瀏覽器都可以支持以上效果，但是IE8及以下版本不支持。