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>

列印頁面