CSS中的scale()函数用来改变元素的大小。
可以通过向量形式定义的缩放值来放大或缩小元素,也可以在不同的方向设置不同的缩放值。
该变换通过一个二维向量确定在一个方向缩放的多少。
如果缩放向量的两个坐标是相等的,那么缩放是均等的,或者说是各向同的,同时元素的形状是被保持的。这种情况下进行的是位似变换。
当坐标值处于区间 [-1, 1]
之外时,该变换将在相应的坐标方向上放大该元素,当处在区间之中时,该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理,当为负数时,将进行像素点反射之后再进行大小的修改。
语法:
scale(sx, sy)
sx:表示缩放向量的横坐标
sy:表示缩放向量的纵坐标。如果未设置,则默认与sx值相同,进行位似变换
举例说明:
HTML
<p>foo</p> <p class="transformed">bar</p>
CSS
p { width: 50px; height: 50px; background-color: teal; } .transformed { /* 等同于 scaleX(2) scaleY(0.5) */ transform: scale(2, 0.5); transform-origin: left; background-color: blue; }
效果如下: