css中旋转中心点

CSS中的旋转是非常有趣的一种动画效果，它能够使整个HTML元素以其中心点为轴心进行旋转。但是，在CSS中，我们也可以更改旋转中心点，使得元素的旋转呈现出不同的效果。

在CSS中，我们可以使用“transform-origin”属性来更改旋转中心点。这个属性接受来自四个关键词：left，right，top 和bottom ，或者是依据元素的百分比的值。这相当于是定义了某个点，以这个点为中心，进行旋转操作。

/* 更改旋转中心点为（50% 50%） */
transform-origin: 50% 50%;

/* 更改旋转中心点为（0 0） */
transform-origin: 0 0;

/* 更改旋转中心点为（100% 0） */
transform-origin: 100% 0; 

通过改变“transform-origin”属性中心点的位置，我们可以做出不同的旋转效果。例如，如果将中心点位置设置在元素的左上角，则元素会像紧靠着左上角一样旋转。

总之，“transform-origin”属性能够使我们很容易地更改元素的旋转中心点，从而创造出与众不同的旋转效果。