CSS中 transform: scale , transform-origin 属性_css transform: scale

scale() 函数

scale() 函数接受一个或两个参数，分别表示在 X 轴和 Y 轴上的缩放比例。如果只提供一个参数，那么 X 轴和 Y 轴都将按相同的比例缩放。

• scale(sx, sy)
  • sx 是 X 轴的缩放因子。
  • sy 是 Y 轴的缩放因子。如果省略，则默认为 sx 的值。

示例

transform-origin 属性

如果你想改变缩放的中心点，可以使用 transform-origin 属性。这个属性允许你设置转换的起始点。例如：

1. 等比例缩放：

   .element {  
     transform: scale(2); /* 放大到原来的两倍 */  
   }
   

2. 不等比例缩放：

   .element {  
     transform: scale(2, 0.5); /* X 轴放大到原来的两倍，Y 轴缩小到原来的一半 */  
   }
   

3. 注意事项

4. 缩放是相对于元素自身的中心点进行的，除非你使用 transform-origin 属性来改变这个中心点。
5. 缩放不会影响元素的布局大小（即它不会改变元素占据的空间），但它会改变元素的渲染大小。
6. 缩放可能会导致元素的边框、背景等按比例放大或缩小。
7. 你可以与其他 transform 函数（如 rotate(), translate(), skew() 等）结合使用 scale()，以创建更复杂的转换效果。

   .element {  
     transform: scale(2);  
     transform-origin: top left; /* 缩放将从元素的左上角开始 */  
   }
   

8. transform-origin 可以接受多种值，包括关键字（如 left, right, top, bottom, center）、长度值（如 px, em, % 等）或者百分比值。在这个例子中，我们使用了关键字 left top 来指定左上角作为变换的原点。

9. 你还可以使用像素值、百分比或其他长度单位来定义 transform-origin 的值。例如：transform-origin: 50px 100px; 或 transform-origin: 50% 50%;（默认值）。