[分享]css中改变位移中心点

在CSS中，使用transformorigin属性可以改变位移中心点。默认情况下，元素的位移中心点为左上角顶点。假如我们要实现一个元素在其中心点旋转的效果，那么需要改变位移中心点。使用transfor...

在CSS中，使用transform-origin属性可以改变位移中心点。

默认情况下，元素的位移中心点为左上角顶点。假如我们要实现一个元素在其中心点旋转的效果，那么需要改变位移中心点。

使用transform-origin属性，可以设置位移中心点的位置，有以下几种方式：

transform-origin: x-axis y-axis;   /*设置具体位置*/
transform-origin: top left;        /*设置具体位置，使用关键字*/
transform-origin: center;          /*设置为元素的中心点*/ 

上述代码中，x-axis和y-axis表示位移中心点在水平方向和垂直方向的距离，可以是像素值（如50px 100px）或百分比（如50% 100%），也可以使用关键字（如top、bottom、left、right等）指定具体位置。

如果只设置一个值，则默认为水平方向的距离，垂直方向的距离为50%。如果同时设置为center，则位移中心点为元素的中心点。

具体使用方法可以参考以下代码：

.box {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transform: rotate(45deg);
  transform-origin: center;
} 

上述代码中，设置了一个元素的宽高为100px，背景色为#f00，并使用rotate函数将其旋转了45deg，最后使用transform-origin属性将位移中心点设置为元素的中心点。