CSS 函数 - translateX()

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

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

可能的值

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

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

语法

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>

打印页面