css3 transform-origin属性定义旋转、缩放和倾斜变换的基准点

css3 transform-origin属性

css3 transform-origin属性定义了旋转、缩放和倾斜变换的基准点，它可以控制变换的参考点，从而让元素以更灵活的方式来变形。

transform-origin属性有两种形式：

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

其中x-axis, y-axis, z-axis分别表示x轴、y轴、z轴，length表示长度，可以是绝对或相对单位。

transform-origin属性可以设置参考点的位置，可以是元素的中心点，也可以是元素的边缘，它的默认值是50% 50% 0，即元素的中心点，也可以使用百分比或者像素值来设置参考点的位置。

  div {
    transform-origin: 50% 50%;
  }

transform-origin属性可以用来控制变换的参考点，从而实现更灵活的变形，例如，我们可以使用transform-origin属性控制元素的旋转中心，这样，我们就可以实现以元素的边缘为中心旋转的效果：

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

transform-origin属性还可以用来控制元素的缩放中心，从而实现以元素的边缘为中心缩放的效果：

  div {
    transform-origin: 0 0;
    transform: scale(2);
  }

transform-origin属性可以让我们更灵活地控制变换的参考点，从而实现更加精细的变形效果。