css transform 绕中心点旋转

CSS中transform属性可以实现很多动画效果，其中之一就是绕中心点旋转。这种旋转效果非常常见，可以用来制作各种动态效果，比如旋转木马、图片轮播等。

在CSS中，通过设置transform-origin属性来指定旋转中心点的位置。其默认值是元素的中心点，可以设置为元素的左上角、右上角、左下角、右下角甚至是其他位置。

transform-origin: center center;

上述代码将元素的中心点作为旋转中心点，如果想要指定其他位置，可以使用像素或百分比进行设置：

transform-origin: 20px 30px;
transform-origin: 50% 50%;

当我们设置完旋转中心点后，就可以使用transform属性来实现绕中心点旋转的效果。比如，我们可以将img元素绕中心点旋转90度：

img {
    transform-origin: center center;
    transform: rotate(90deg);
}

上述代码将img元素绕中心点旋转了90度。我们还可以使用动画效果让旋转变得更加生动：

img {
    transform-origin: center center;
    animation: rotateAnimation 2s linear infinite;
}

@keyframes rotateAnimation {
    from {transform: rotate(0);}
    to {transform: rotate(360deg);}
}

上述代码将img元素设置为绕中心点旋转，并且使用了CSS动画效果。这个动画将使img元素绕中心点不断旋转，旋转时间为2秒，旋转速度为线性，旋转次数为无限。

绕中心点旋转已经成为了CSS动画中的一种非常基础且重要的效果。通过设置transform-origin属性来指定旋转中心点的位置，我们可以实现各种炫酷的旋转效果。