CSS 函数 - translateZ（）

CSS 中的 translateZ（） 函数用于在 3D 空间中沿 Z 轴平移或移动元素，即离观众更近和更远。它是 CSS 中的转换函数之一，允许您修改网页上元素的位置和外观。结果是 <transform-function> 数据类型。

可能的值

函数 translateZ（） 只能接受一个参数。

tz：它是一个 <length> 值，指定元素或元素向内或向外移动的距离。表示平移向量 [0， 0， tz] 的 z 分量。正值将元素移向观看者，而负值则将元素移得更远。

语法


transform: translateZ(tz);

perspective（） 函数定义了计算机屏幕平面与要应用 translateZ 的 HTML 元素之间的虚拟距离。

使用 perspective（）和 translateZ（）函数会显示一些意外行为。

当提供给 translateZ（）的值大于或等于 perspective（）的值时，应用该值的 HTML 元素将消失。

perspective（）允许使用除零值（0px， 0， 0em）以外的任何值，因为它会导致 translateZ（）效果被忽略。

CSS translateZ（） - 悬停时的翻译

以下是在按钮上与伪类：hover 一起使用的 translateZ（）函数的示例。悬停时按钮的大小和位置会发生变化：


<html>
<head>
<style>
	 	div {
	 	 	 height: 200px;
	 	 	 width: 300px;
	 	 	 border: 5px solid black;
	 	 	 background-color: beige;
	 	 	 margin: 50px;
	 	 	 display: inline-block;
	 	}
	 	
	 	button {
	 	 	 transform: perspective(150px) translateZ(20px);
	 	 	 transition: transform 100ms linear;
	 	 	 width: 80px;
	 	 	 height: 30px;
	 	 	 background-color: blue;
	 	 	 color: white;
	 	 	 margin: 30px;
	 	}

	 	button:hover {
	 	 	 transform: perspective(150px) translateZ(80px);
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h2>translateZ() example</h2>
	 	 	 <button>click</button>
	 	</div>
</body>
</html>

CSS translateZ（） - 使用 perspective（）进行翻译

以下是 translateZ（）函数和 perspective（）的示例。应用函数的 div 元素，位置基于传递给 translateZ（）函数的值。


<html>
<head>
<style>
	 	div {
	 	 	 height: 110px;
	 	 	 width: 110px;
	 	 	 border: 2px solid black;
	 	 	 background-color: aquamarine;
	 	 	 margin: 15px;
	 	}

	 	.translate-z-length {
	 	 	 transform: perspective(200px) translateZ(50px);
	 	 	 background-color: tomato;
	 	}
</style>
</head>
<body>
	 	<div>No translateZ() applied</div>
	 	<div class="translate-z-length">translateZ() applied</div>
</body>
</html>

更改 perspective（）和 translateZ（）的值以查看效果。

perspective（） 函数负责将观看者相对于平面定位，即相对于屏幕表面（z=0）。因此，在上面的示例中，值 0f 200px 表示用户位于图像前面 200 像素处。

translateZ（） 的值为 50px，表示元素从屏幕向外移动 50px，朝向用户。在 2D 显示器上查看时，该元素看起来更大。

函数的编写顺序很重要，因为转换的组合不是可交换的。perspective（） 函数应放在 translateZ（） 函数之前。

打印本页

CSS 函数 - translateZ（）

可能的值

语法

CSS translateZ（） - 悬停时的翻译

CSS translateZ（） - 使用 perspective（） 进行翻译

CSS translateZ（） - 使用 perspective（）进行翻译