CSS 数据类型

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

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

属性值

函数translateY()只能采用一个参数。它指定元素应垂直移动的距离。正值使元素向下移动，而负值使元素向上移动。

语法

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>

CSStranslateY(): 负长度值

以下是使用负长度值作为参数的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>