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

CSS 中的 translate3d（） 函数用于在三维空间中翻译或移动元素。结果是 <transform-function> 数据类型。

translate3d（）函数基于三维向量 [tx， ty， tz] 进行转换。坐标值确定元素的移动方向。

可能的值

函数 translate3d（） 将以下值作为参数。

tx：可以是 <length> 或 <percentage> 值，表示平移向量 [tx， ty， tz] 的横坐标（水平，x 分量）。
ty：可以是表示平移向量 [tx， ty， tz] 的纵坐标（垂直，y 分量）的 <length> 或 <percentage> 值。
tz：只能是一个 <length> 值，表示转换向量 [tx， ty， tz] 的 z 分量。它不能具有 <percentage> 值，如果给定包含转换的属性，则该值将无效。

语法

transform: translate3d(tx, ty, tz);

CSS translate3d（） - 长度值

以下是 translate3d（）函数的示例，其中包含可以将长度值传递给它的各种方式，即正值和负值：

<html>
<head>
<style>
	 	#container {
	 	 	 border: 5px solid black;
	 	 	 margin: 25px;
	 	}

	 	#sample {
	 	 	 height: 110px;
	 	 	 width: 110px;
	 	 	 border: 2px solid black;
	 	}

	 	.translate-3d-length {
	 	 	 transform: translate3d(20px, 30px, 20px);
	 	 	 background-color: yellowgreen;
	 	}

	 	.translate-3d-negative {
	 	 	 transform: translate(-20px, -10px, -30px);
	 	 	 background-color: tomato;
	 	}
</style>
</head>
<body>
	 	<div id="container">
	 	 	 <div id="sample" style="background-color: lightyellow;">no translate() applied</div>
	 	 	 <div class="translate-3d-length" id="sample">translate3d(20px, 30px, 20px)</div>
	 	 	 <div class="translate-3d-negative" id="sample">translate3d(-20px, -10px, -30px)</div>
	 	</div>
</body>
</html>

CSS translate3d（） - 结合 x 轴和 z 轴值

以下是 translate3d（）函数的示例，其中长度值传递给 x 轴和 z 轴：

<html>
<head>
<style>
	 	#container {
	 	 	 border: 5px solid black;
	 	 	 margin: 25px;
	 	}

	 	#sample {
	 	 	 height: 110px;
	 	 	 width: 110px;
	 	 	 border: 2px solid black;
	 	}

	 	.translate-3d-length {
	 	 	 transform: translate3d(20px, 0, 20px);
	 	 	 background-color: yellowgreen;
	 	}
</style>
</head>
<body>
	 	<div id="container">
	 	 	 <div id="sample" style="background-color: lightyellow;">no translate3d()</div>
	 	 	 <div class="translate-3d-length" id="sample">translate3d(20px, 0, 20px)</div>
	 	 	 <div id="sample" style="background-color: lightyellow;">no translate3d()</div>
	 	</div>
</body>
</html>

CSS translate3d（） - 结合 y 轴和 z 轴值

以下是 translate3d（）函数的示例，其中长度值以及 perspective（）值一起传递给 y 轴和 z 轴：

<html>
<head>
<style>
	 	#container {
	 	 	 border: 5px solid black;
	 	 	 margin: 25px;
	 	}

	 	#sample {
	 	 	 height: 110px;
	 	 	 width: 110px;
	 	 	 border: 2px solid black;
	 	}

	 	.translate-3d-length {
	 	 	 transform: perspective(580px) translate3d(0, 30px, 50px);
	 	 	 background-color: yellowgreen;
	 	}
</style>
</head>
<body>
	 	<div id="container">
	 	 	 <div id="sample" style="background-color: lightyellow;">no translate3d()</div>
	 	 	 <div class="translate-3d-length" id="sample">translate3d(0, 30px, 50px)</div>
	 	 	 <div id="sample" style="background-color: lightyellow;">no translate3d()</div>
	 	</div>
</body>
</html>

<< CSS 函数 - rotateX() CSS 函数 - translate() >>