CSS中的transform屬性提供了多種實現旋轉動畫的方式，其中最常用的是繞著中心點旋轉，即通過設置transform-origin為center來實現。

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

除了繞著中心點旋轉外，我們還可以通過設置transform-origin為其他位置來實現繞著不同點旋轉，如top、left、bottom、right等。

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

如果要實現在不同時間點繞著不同的點進行旋轉，可以通過關鍵幀（@keyframe）來實現。

.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;
}
}

除了旋轉外，transform還有很多其他的變形效果，如縮放、平移、傾斜等?？梢酝ㄟ^設置不同的值來實現不同的效果。

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

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