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>?);

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS translate() - 长度值

以下是使用 translate() 函数以及可以传递给它的各种长度值（即单个值、双值、0）的示例。

Open Compiler

<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() 函数以及可以传递给它的各种百分比值（即单个值或双值）的示例。

Open Compiler

<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>

打印页面