CSS中 transform: scale , transform-origin 属性

HWL5679

已于 2024-06-25 17:42:38 修改

阅读量468

点赞数 3

文章标签： css 前端

于 2024-06-25 11:57:05 首次发布

本文链接：https://blog.csdn.net/H2608520347/article/details/139954949

版权

scale() 函数

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

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

等比例缩放：

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

不等比例缩放：

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

注意事项
缩放是相对于元素自身的中心点进行的，除非你使用 transform-origin 属性来改变这个中心点。
缩放不会影响元素的布局大小（即它不会改变元素占据的空间），但它会改变元素的渲染大小。
缩放可能会导致元素的边框、背景等按比例放大或缩小。
你可以与其他 transform 函数（如 rotate(), translate(), skew() 等）结合使用 scale()，以创建更复杂的转换效果。
```
.element {  
  transform: scale(2);  
  transform-origin: top left; /* 缩放将从元素的左上角开始 */  
}
```
transform-origin 可以接受多种值，包括关键字（如 left, right, top, bottom, center）、长度值（如 px, em, % 等）或者百分比值。在这个例子中，我们使用了关键字 left top 来指定左上角作为变换的原点。
你还可以使用像素值、百分比或其他长度单位来定义 transform-origin 的值。例如：transform-origin: 50px 100px; 或 transform-origin: 50% 50%;（默认值）。