css transform scale

/* 使用 CSS transform scale 对元素进行缩放 */

/* 基本用法：将元素放大 1.5 倍 */
.example {
  transform: scale(1.5);
}

/* 在 X 和 Y 方向分别缩放 */
.example-x-y {
  transform: scaleX(2) scaleY(0.5); /* X 方向放大 2 倍，Y 方向缩小为一半 */
}

/* 缩放并保持中心点不变 */
.example-center {
  transform: scale(1.2);
  transform-origin: center; /* 默认情况下，transform-origin 是 center */
}

/* 缩放时指定不同的原点 */
.example-top-left {
  transform: scale(1.2);
  transform-origin: top left; /* 从左上角开始缩放 */
}

/* 动画效果：鼠标悬停时缩放 */
.example-hover {
  transition: transform 0.3s ease;
}

.example-hover:hover {
  transform: scale(1.1); /* 鼠标悬停时放大 1.1 倍 */
}

解释说明：

• transform: scale(x)：scale() 函数用于缩放元素。x 是缩放的比例，大于 1 表示放大，小于 1 表示缩小。
• transform-origin：定义了元素的缩放原点，默认是元素的中心 (center)，可以设置为其他位置如 top left、bottom right 等。
• transition：用于添加平滑的动画效果，当元素的状态发生变化时（例如鼠标悬停），过渡效果会逐渐变化而不是立即生效。