1. 什么是旋转点
在CSS3中，我们可以使用transform属性来对元素进行旋转，但是默认情况下元素的旋转点是固定在元素中心位置的。而旋转点实际上就是决定元素旋转中心的点，也可以称之为变换原点。如果我们想要改变元素的旋转中心，就需要设置旋转点位置。
2. 如何设置旋转点
在CSS3中，我们通过transform-origin属性来设置旋转点的位置。它的默认值为50% 50%，即元素中心点。该属性值可以是像素值、百分比或关键字，其中百分比值是相对于元素自身的宽高，关键字包括top、bottom、left、right、center等，分别表示元素的上边界、下边界、左边界、右边界、中心点。
下面来看几个例子：
2.1 设置旋转点为顶部中心点
.box {
transform-origin: center top;
}
该代码片段中的transform-origin属性将元素的旋转点设置为顶部中心点，即沿着元素顶部中心点进行旋转的。
2.2 设置旋转点为右上角
.box {
transform-origin: top right;
}
该代码片段中的transform-origin属性将元素的旋转点设置为右上角，即沿着元素右上角进行旋转的。
2.3 设置旋转点为离元素左侧40px处
.box {
transform-origin: 40px center;
}
该代码片段中的transform-origin属性将元素的旋转点设置为离元素左侧40px处，即沿着该位置进行旋转的。
3. transform-origin与transform的关系
在设置transform-origin时，需要注意它的位置会影响元素的transform旋转效果，下面来看一个例子：
.box1 {
transform: rotate(45deg);
}
.box2 {
transform-origin: top right;
transform: rotate(45deg);
}
在上面的例子中，box1和box2都进行了45度的旋转，但是box1是以中心点为旋转点，而box2是以右上角为旋转点。因此box2的旋转效果比box1的更加明显，因为box2的旋转点更接近旋转边缘。
4. 结语
通过上述内容，我们了解了如何设置元素的旋转点，并且了解了如何使用transform-origin属性。在实际开发中，我们可以根据需求自由设置旋转点，达到不同的旋转效果。