css中属性可以变换中心点

CSS中属性可以变换中心点

transform-origin: x-axis y-axis z-axis;

在使用CSS对元素进行变换时，元素的中心点默认是元素的中心位置。但是，我们可以使用transform-origin属性来调整元素的变换中心点。该属性值可以设定为百分比或固定的像素值。

transform-origin属性需要三个值x-axis、y-axis和z-axis。x-axis和y-axis值表示水平和垂直方向上的偏移量，z-axis值则表示元素在3D空间中的位置。当元素不进行3D变换时，z-axis值可以省略。

对于一个普通的2D元素，当transform-origin的值为50% 50%时，元素的中心点即为元素的中心位置，变换效果将会从元素中心处发生。如果我们将transform-origin的值设置为0 0，则变换效果将从元素的左上角处发生。

div{
  transform: rotate(45deg);
  transform-origin: 0% 0%;
} 

上述代码将元素向左上角进行了45度的旋转，而不是从元素的中心开始进行旋转。

在进行3D变换时，transform-origin的使用会更加复杂和关键。在3D空间中，元素的旋转轴依然是以元素的中心点为基准，但是元素在空间中的位置、大小和旋转角度需要进行更复杂的计算。

div{
  transform: rotate3d(1,1,1, 45deg);
  transform-origin: 50% 50% -20px;
} 

上述代码将元素沿着x、y、z三个方向各旋转45度，并设置了元素的变换中心点在水平和垂直方向上分别为元素的中心位置，但是在z轴方向上偏移了20px。

这样，我们就可以使用transform-origin属性来更加灵活地控制元素在变换过程中的中心点了。