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

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

该函数通过一个常数因子（而不是 1）修改每个元素点的 z 坐标。当比例因子为 1 时，函数将进行身份转换。scaleZ（-1）指定轴对称性，其中 z 轴穿过变换原点。

可能的值

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

s：一个数字，表示要应用于元素的每个点的 z 坐标的比例因子。

语法


transform: scaleZ(s);

CSS scaleZ（） - 正值和负值

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


<html>
<head>
<style>
	 	div {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 background-color: cyan;
	 	 	 border: 2px solid black;
	 	}

	 	.scale-z-positive {
	 	 	 background-color: pink;
	 	 	 transform: perspective(800px) scaleZ(2) translateZ(-100px);
	 	}

	 	.scale-z-negative {
	 	 	 background-color: lightgreen;
	 	 	 transform: perspective(800px) scaleZ(-0.5) translateZ(-100px);
	 	}
</style>
</head>
<body>
	 	<section>
	 	 	 <p>No function</p>
	 	 	 <div></div>
	 	</section>
	 	
	 	<section>
	 	 	 <p>+ve scaleZ()+translateZ()</p>
	 	 	 <div class="scale-z-positive"></div>
	 	</section>
	 	
	 	<section>
	 	 	 <p>-ve scaleZ()+translateZ()</p>
	 	 	 <div class="scale-z-negative"></div>
	 	</section>
</body>
</html>

<< CSS 函数 - scale() CSS 函数 - scaleY() >>