css scale 中心点

/* 使用 CSS transform: scale() 时，默认的缩放中心点是元素的中心（50%, 50%）。如果你想改变这个中心点，可以使用 transform-origin 属性。 */

/* 示例代码：将缩放中心点设置为左上角 */
.element {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(2);
  transform-origin: top left; /* 设置缩放中心点为左上角 */
}

/* 示例代码：将缩放中心点设置为右下角 */
.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transform: scale(2);
  transform-origin: bottom right; /* 设置缩放中心点为右下角 */
}

/* 示例代码：将缩放中心点设置为自定义位置 (30%, 70%) */
.element {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: scale(2);
  transform-origin: 30% 70%; /* 设置缩放中心点为自定义位置 */
}

解释说明：

• transform: scale(2); 表示将元素放大 2 倍。
• transform-origin 属性用于指定缩放的中心点，默认是元素的中心（50%, 50%）。
• 你可以通过 top left, bottom right 或者具体的百分比值（如 30% 70%）来自定义缩放中心点的位置。