CSS 函数 - translate3d()

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

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

可能的值

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

tx：可以是表示平移向量 [tx, ty, tz] 的横坐标（水平，x 分量）的<length> 或<percentage> 值。
ty：可以是表示平移向量 [tx, ty, tz] 的纵坐标（垂直，y 分量）的<length> 或<percentage> 值。
tz：只能是表示平移向量 [tx, ty, tz] 的 z 分量的<length> 值。它不能具有<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 轴和 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 轴以及 perspective() 值的示例

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

打印页面