scale css

/* 使用 scale() 函数对元素进行缩放 */

/* 示例 1: 简单的缩放 */
.element {
  transform: scale(1.5); /* 元素在 X 和 Y 方向都放大 1.5 倍 */
}

/* 示例 2: 分别设置 X 和 Y 方向的缩放 */
.element {
  transform: scale(2, 0.5); /* 元素在 X 方向放大 2 倍，在 Y 方向缩小为 0.5 倍 */
}

/* 示例 3: 动画中的缩放 */
@keyframes grow {
  from {
    transform: scale(1); /* 初始状态，不缩放 */
  }
  to {
    transform: scale(1.5); /* 最终状态，放大 1.5 倍 */
  }
}

.element {
  animation: grow 2s ease-in-out infinite; /* 应用动画，持续 2 秒，无限循环 */
}

解释说明：

• scale() 是 CSS 中用于缩放元素的函数。它可以接受一个或两个参数，分别控制元素在 X 和 Y 方向上的缩放比例。
• 如果只提供一个参数，则该参数同时应用于 X 和 Y 方向。
• 如果提供两个参数，则第一个参数控制 X 方向的缩放，第二个参数控制 Y 方向的缩放。
• transform: scale(1) 表示元素保持原大小，scale(2) 表示元素放大 2 倍，scale(0.5) 表示元素缩小为原来的 50%。
• 在动画中使用 scale() 可以实现平滑的缩放效果。