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>

列印頁面