CSS 数据类型

CSS中的translate3d()函数用于在三维空间中平移或移动元素。结果是 <transform-function> 数据类型。

translate3d ()函数基于三维向量 [tx, ty, tz] 进行转换。坐标值决定元素移动的方向。

可能的值

函数translate3d() 采用以下值作为参数。

  • tx:可以是 <length> 或 <percentage> 值，表示平移向量 [tx, ty, tz] 的横坐标（水平，x 分量）。

  • ty:可以是表示纵坐标（垂直、垂直、平移向量 [tx, ty, tz] 的 y 分量）。

  • tz:只能是 <length> 表示平移向量 [tx, ty, tz] 的 z 分量的值。它不能有 <percentage> 值，如果给定包含转换的属性将无效。

语法

transform: translate3d(tx, ty, tz);

CSS translate3d(): 长度值

以下是translate3d()函数的示例，其中包含可以将长度值传递给它的各种方式，即，正值和负值:

<html>
<head>
<style>
   #container {
      border: 5px solid black;
      margin: 25px;
   }

   #sample {
      height: 110px;
      width: 110px;
      border: 2px solid black;
   }

   .translate-3d-length {
      transform: translate3d(20px, 30px, 20px);
      background-color: yellowgreen;
   }

   .translate-3d-negative {
      transform: translate(-20px, -10px, -30px);
      background-color: tomato;
   }
</style>
</head>
<body>
   <div id="container">
      <div id="sample" style="background-color: lightyellow;">no translate() applied</div>
      <div class="translate-3d-length" id="sample">translate3d(20px, 30px, 20px)</div>
      <div class="translate-3d-negative" id="sample">translate3d(-20px, -10px, -30px)</div>
   </div>
</body>
</html>

CSS translate3d(): 组合 x 轴和 z 轴值

以下是 translate3d() 函数的示例，其中长度值传递给 x -axis 和 z 轴:

<html>
<head>
<style>
   #container {
      border: 5px solid black;
      margin: 25px;
   }

   #sample {
      height: 110px;
      width: 110px;
      border: 2px solid black;
   }

   .translate-3d-length {
      transform: translate3d(20px, 0, 20px);
      background-color: yellowgreen;
   }
</style>
</head>
<body>
   <div id="container">
      <div id="sample" style="background-color: lightyellow;">no translate3d()</div>
      <div class="translate-3d-length" id="sample">translate3d(20px, 0, 20px)</div>
      <div id="sample" style="background-color: lightyellow;">no translate3d()</div>
   </div>
</body>
</html>

CSS translate3d(): 组合 y 轴和 z 轴值

以下是 translate3d() 函数的示例，其中长度值传递给y 轴和 z 轴，以及透视（）值:

<html>
<head>
<style>
   #container {
      border: 5px solid black;
      margin: 25px;
   }

   #sample {
      height: 110px;
      width: 110px;
      border: 2px solid black;
   }

   .translate-3d-length {
      transform: perspective(580px) translate3d(0, 30px, 50px);
      background-color: yellowgreen;
   }
</style>
</head>
<body>
   <div id="container">
      <div id="sample" style="background-color: lightyellow;">no translate3d()</div>
      <div class="translate-3d-length" id="sample">translate3d(0, 30px, 50px)</div>
      <div id="sample" style="background-color: lightyellow;">no translate3d()</div>
   </div>
</body>
</html>