[分享]css中 怎么改变旋转中心

在CSS中，旋转一个元素可以使用transform属性中的rotate()函数。但是有时候我们可能需要改变元素旋转的中心点，而不是默认的元素中心点。要改变元素旋转的中心点，可以使用transformo...

在CSS中，旋转一个元素可以使用transform属性中的rotate()函数。但是有时候我们可能需要改变元素旋转的中心点，而不是默认的元素中心点。

要改变元素旋转的中心点，可以使用transform-origin属性。这个属性接受两个值，第一个值是水平方向的位置，可以是像素或百分比，第二个值是垂直方向的位置，同样可以是像素或百分比。如果只设置一个值，则第二个值默认为50%。

.example {
  transform-origin: 50px 100px;
  transform: rotate(45deg);
} 

上面的例子中，我们将元素的旋转中心点设置为横坐标为50px，纵坐标为100px的位置。然后我们使用rotate()函数将元素旋转了45度。

除了使用绝对位置的像素值或百分比之外，我们还可以使用关键字来设置旋转中心点。支持的关键字包括top、bottom、left、right、center。例如：

.example {
  transform-origin: right bottom;
  transform: rotate(30deg);
} 

上面的例子中，我们将元素的旋转中心点设置为右下角，然后将元素旋转了30度。

总之，改变元素的旋转中心点可以通过设置transform-origin属性来实现。这个属性接受像素、百分比或关键字作为值。这样我们就可以轻松的在元素的任何位置进行旋转操作了。