css transform 缩放
时间: 2023-11-06 11:52:26 浏览: 190
css3的transform中scale缩放详解
5星 · 资源好评率100%
CSS transform 的缩放功能可以通过使用 transform 属性中的 scale() 函数来实现。scale() 函数可以接受一个参数或两个参数,分别表示水平方向和垂直方向的缩放比例。
例如,如果要将元素在水平方向缩小一半,可以使用如下的 CSS 代码:
transform: scale(0.5);
如果要将元素同时在水平和垂直方向缩小一半,可以使用如下的 CSS 代码:
transform: scale(0.5, 0.5);
同样地,如果要将元素在水平方向放大两倍,可以使用如下的 CSS 代码:
transform: scale(2);
如果要将元素同时在水平和垂直方向放大两倍,可以使用如下的 CSS 代码:
transform: scale(2, 2);
请注意,缩放的比例是相对于元素的原始大小进行计算的。缩放比例小于 1 表示缩小,大于 1 表示放大。
通过使用 scale() 函数,我们可以轻松地实现 CSS transform 的缩放效果。
阅读全文