CSS 函数 - translateX（）

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

translateX（）函数通常与其他 CSS 转换函数结合使用，如 translateY（）（用于垂直移动）、scale（）（用于缩放）和 rotate（）（用于旋转），以在 Web 元素上创建更复杂的转换和动画。

可能的值

函数 translateX（） 只能接受一个参数。它指定元素应水平移动的距离。正值将元素向右移动，而负值将其向左移动。

<length-percentage>：可以是 <length> 或 <percentage> 值，表示平移向量 [tx，0] 的水平 x 分量。

语法


transform: translateX(100px) | translateX(45%);

CSS translateX（） - 长度值

以下是将长度值作为参数的 translateX（）函数示例：


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

	 	.translate-x-length {
	 	 	 transform: translateX(100px);
	 	 	 background-color: tomato;
	 	}
</style>
</head>
<body>
	 	<div>No translateX() applied</div>
	 	<div class="translate-x-length">translateX(100px) applied</div>
</body>
</html>

CSS translateX（） - 百分比值

以下是以百分比值作为参数的 translateX（）函数示例：


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

	 	.translate-x-percent {
	 	 	 transform: translateX(30%);
	 	 	 background-color: tomato;
	 	}
</style>
</head>
<body>
	 	<div>No translateX() applied</div>
	 	<div class="translate-x-percent">translateX(30%) applied</div>
</body>
</html>

CSS translateX（） - 使用负百分比值

以下是 translateX（）函数的示例，参数为负百分比值：


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

	 	.translate-x-percent {
	 	 	 transform: translateX(-10%);
	 	 	 background-color: tomato;
	 	}
</style>
</head>
<body>
	 	<div>No translateX() applied</div>
	 	<div class="translate-x-percent">translateX(-10%) applied</div>
</body>
</html>

CSS translateX（） - 使用负长度值

以下是使用负长度值作为参数的 translateX（）函数示例：


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

	 	.translate-x-length {
	 	 	 transform: translateX(-10px);
	 	 	 background-color: tomato;
	 	}
</style>
</head>
<body>
	 	<div>No translateX() applied</div>
	 	<div class="translate-x-length">translateX(-10px) applied</div>
</body>
</html>

打印本页