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

CSS 中的 translate（） 函数用于分别沿 X 轴和/或 Y 轴水平和/或垂直移动元素。它是 CSS 中的转换函数之一，允许您修改网页上元素的位置和外观。结果是 <transform-function> 数据类型。

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

可能的值

函数 translate（）可以将以下任何值作为参数。

单个 <length-percentage> 值：可以是 <length> 或 <percentage> 值，表示平移向量 [tx，0] 的横坐标（水平，x 分量）;而平移向量的纵坐标（垂直，y 分量）的值为 0。<percentage> 值（分配时）是由 transform-box 属性定义的引用框的宽度。
双精度 <length-percentage> 值：指定两个 <length> 或 <percentage> 值，分别表示平移向量的横坐标（水平，x 分量）和平移向量 [tx， ty] 的纵坐标（垂直，y 分量）。 <percentage> （分配时）作为第一个值是宽度，作为第二个部分，是到 transform-box 属性定义的参考框的高度。

语法


transform: translate(<length-percentage>, <length-percentage>?);

CSS translate（） - 长度值

以下是 translate（） 函数的示例，其中包含可以将长度值传递给它的所有各种方式，即单值、双倍值、0：


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

	 	.translate-0 {
	 	 	 transform: translate(0);
	 	 	 background-color: tomato;
	 	}

	 	.translate-single {
	 	 	 transform: translate(20px);
	 	 	 background-color: yellowgreen;
	 	}

	 	.translate-double {
	 	 	 transform: translate(20px, 50px);
	 	 	 background-color: lightcyan;
	 	}

	 	.translate-negative {
	 	 	 transform: translate(-2.1rem, -2rem);
	 	 	 background-color: pink;
	 	}
</style>
</head>
<body>
	 	<div>no translate() applied</div>
	 	<div class="translate-0">translate(0)</div>
	 	<div class="translate-single">translate(20px)</div>
	 	<div class="translate-double">translate(20px, 50px)</div>
	 	<div class="translate-negative">translate(-2.1rem, -2rem)</div>
</body>
</html>

CSS translate（） - 百分比值

以下是 translate（） 函数的一个示例，其中包含可以将百分比值传递给它的所有各种方式，即单值或双精度值：


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

	 	.translate-single {
	 	 	 transform: translate(20%);
	 	 	 background-color: yellowgreen;
	 	}

	 	.translate-double {
	 	 	 transform: translate(20%, 50%);
	 	 	 background-color: tomato;
	 	}
</style>
</head>
<body>
	 	<div>no translate() applied</div>
	 	<div class="translate-single">translate(20%)</div>
	 	<div class="translate-double">translate(20%, 50%)</div>
</body>
</html>

<< CSS 函数 - translate3d() CSS 数据类型 - length-percentage >>