CSS 函式 - translate()

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 分量）和平移向量的縱座標（垂直，y 分量）[tx, ty]。<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>

列印頁面