在CSS中，我们可以通过rotate()函数对元素进行旋转。但是，如果我们想要让元素绕某个点旋转，该如何实现呢？这就需要用到CSS3中的transform-origin属性。
transform-origin: x-axis y-axis z-axis;
transform-origin属性用于设置旋转或缩放元素时的基准点。其中，x-axis、y-axis、z-axis可以是以下几种值：
- left
- center
- right
- top
- bottom
- 长度值（如50px）
- 百分比值（如50%）
默认情况下，transform-origin的值为50% 50% 0，即元素的中心点。
下面是一个绕某点旋转的例子：
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 100px;
height: 100px;
margin: 50px auto;
background-color: red;
animation: rotation 5s linear infinite;
transform-origin: 50% 0;
}
@keyframes rotation{
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>该例子中，box元素绕其顶部中心点旋转。关键代码如下：
.box{
/* 省略其他样式 */
transform-origin: 50% 0;
}transform-origin的值为50% 0，表示元素的旋转基准点在其宽度中心点和顶部（即y轴方向上的0点）。
在CSS中，我们可以通过transform-origin属性实现元素的绕某一点旋转。这种方法为我们的网页增添了更多的视觉效果，为用户带来更好的浏览体验。