CSS transform属性中的scale()函数可以用来缩放HTML元素。默认情况下,scale函数的基点是元素中心点,但是我们也可以通过改变transform-origin属性来改变缩放的基点。
transform-origin: x-axis y-axis;
transform-origin属性可以接受两个值,分别表示基点在x轴和y轴上的位置。默认值是50% 50%,即元素的中心点。在设置transform-origin属性时,使用百分比、像素、em等单位均可。
举个例子,在下面的代码中,我们将一个正方形div元素的缩放基点改为了顶部中心点。
div { width: 100px; height: 100px; background-color: teal; transform-origin: 50% 0%; transform: scale(1.5); }
为了实现这个效果,我们将transform-origin属性设置为50% 0%,即基点在x轴上为50%(即中心点),在y轴上为0%(即顶部)。最后,我们将scale()函数的值设为1.5,表示将元素放大1.5倍。
总之,改变CSS transform属性中scale()函数的基点非常简单,只需要使用transform-origin属性来设置x轴和y轴上的百分比或像素值即可。