CSS 函数 - scaleY()_CSS 菜鸟教程

CSS 中的 scaleY（） 函数用于对沿垂直（Y 轴）维度的元素应用缩放转换（调整大小）。结果是 <transform-function> 数据类型。

该函数通过常数因子修改元素点的纵坐标（垂直，Y 坐标）。当比例因子为 1 时，函数将进行身份转换。scaleY（-1） 指定轴对称性，其中水平轴穿过变换原点。

可能的值

函数 scaleY（） 接受单个参数。

s：一个数字，表示要应用于元素的每个点的纵坐标（垂直，y 坐标）的比例因子。

语法

transform: scaleY(s);

CSS scaleY（） - 正值和负值

以下是以正值和负值作为参数的 scaleY（） 函数示例：

<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-image: url(images/logo.png);
	 	 	 margin-bottom: 1em;
	 	}

	 	section {
	 	 	 outline: 2px solid blue;
	 	 	 width: 150px;
	 	 	 height: max-content;
	 	}

	 	.scale-y-positive {
	 	 	 background-image: url(images/logo.png);
	 	 	 transform: scaleY(0.8);
	 	}

	 	.scale-y-negative {
	 	 	 background-image: url(images/logo.png);
	 	 	 transform: scaleY(-0.4);
	 	}

	 	.scale-y-one {
	 	 	 background-image: url(images/logo.png);
	 	 	 transform: scaleY(1);
	 	}

	 	.scale-y-int {
	 	 	 background-image: url(images/logo.png);
	 	 	 transform: scaleY(1.5);
	 	}
</style>
</head>
<body>
	 	<section>
	 	 	 <p>No function</p>
	 	 	 <div></div>
	 	</section>
	 	<section>
	 	 	 <p>scaleY(-0.4)</p>
	 	 	 <div class="scale-y-negative"></div>
	 	</section>
	 	<section>
	 	 	 <p>scaleY(0.8)</p>
	 	 	 <div class="scale-y-positive"></div>
	 	</section>
	 	<section>
	 	 	 <p>scaleY(1)</p>
	 	 	 <div class="scale-y-one"></div>
	 	</section>
	 	<section>
	 	 	 <p>scaleY(1.5)</p>
	 	 	 <div class="scale-y-int"></div>
	 	</section>
</body>
</html>

<< CSS 函数 - scaleZ() CSS 函数 - scaleX() >>