CSS中的transform属性提供了多种实现旋转动画的方式，其中最常用的是绕中心点旋转，这是通过设置transform-origin为center来实现的。
.box {
变换原点：中心；
动画：旋转2s线性无限；
}
@关键帧旋转{
从 {
变换：旋转（0度）；
}
到 {
变换：旋转（360deg）；
}
}除了绕中心点旋转外，我们还可以通过将transform-origin设置为其他位置来绕不同点旋转，比如上、左、下、右等。
.box {
变换原点：左；
动画：旋转2s线性无限；
}
@关键帧旋转{
从 {
变换：旋转（0度）；
}
到 {
变换：旋转（360deg）；
}
}如果想在不同时间点围绕不同点旋转，可以通过关键帧（@keyframe）来实现。
.box {
动画：旋转4s线性无限；
}
@关键帧旋转{
0% {
变换：旋转（0度）；
变换原点：左；
}
50% {
变换：旋转（180度）；
变换原点：底部；
}
100% {
变换：旋转（360deg）；
变换原点：右；
}
}transform除了旋转之外，还有很多其他的变形效果，比如缩放、平移、倾斜等，通过设置不同的值可以实现不同的效果。
.box {变换：缩放（1.5，1.5）倾斜（30度，20度）平移（50像素，50像素）；
}所有支持transform属性的浏览器都可以支持以上效果，但IE8及以下版本不支持。
