CSS 数据类型

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

translate() 函数根据二维向量 [tx, ty]。坐标值决定元素移动的方向。

可能的值

函数translate()可以采用以下任何值作为参数。

  • 单个 <length-percentage>值:可以是 <length> 或 <percentage> 值，表示横坐标（水平，x 分量）平移向量[tx,0]；而平移向量的纵坐标（垂直，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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27