CSS 函式 - translateY()

CSS 中的 translateY() 函式用於沿 Y 軸垂直平移或移動元素。它是 CSS 中的變換函式之一，允許您修改網頁上元素的位置和外觀。結果是 <transform-function> 資料型別。

translateY() 函式通常與其他 CSS 變換函式結合使用，例如 translateX()（用於水平移動）、scale()（用於縮放）和 rotate()（用於旋轉），以建立更復雜的變換和網頁元素動畫。

可能的值

函式 translateY() 只能接受一個引數。它指定元素應垂直移動的距離。正值將元素向下移動，而負值將元素向上移動。

<length-percentage>：可以是表示平移向量 [0,ty] 的垂直 y 分量的 <length> 或 <percentage> 值。

語法

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

CSS translateY() - 長度值

以下是使用長度值作為引數的 translateY() 函式示例

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

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

CSS translateY() - 百分比值

以下是使用百分比值作為引數的 translateX() 函式示例

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

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

CSS translateY() - 負百分比值

以下是使用負百分比值作為引數的 translateY() 函式示例

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

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

CSS translateY() - 負長度值

以下是使用負長度值作為引數的 translateY() 函式示例

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

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

列印頁面