CSS Function - translate3d()

The translate3d() function in CSS is used to translate, or move, an element in three-dimensional space. The result is a <transform-function> datatype.

The translate3d() function results in the transformation, based on the three-dimensional vector [tx, ty, tz]. The coordinates value determine the direction in which the element will move.

Possible values

The function translate3d() takes the following values as parameter(s).

  • tx: Can be a <length> or <percentage> value that represents the abscissa (horizontal, x-component) of the translating vector [tx, ty, tz].

  • ty: Can be a <length> or <percentage> value that represents the ordinate (vertical, y-component) of the translating vector [tx, ty, tz].

  • tz: Can only be a <length> value that represents z-component of the translating vector [tx, ty, tz]. It can not have a <percentage> value and if given the property containing the transform will be invalid.

Syntax

transform: translate3d(tx, ty, tz);

CSS translate3d() - Length Value

Following is an example of translate3d() function with the various ways in which length values can be passed to it, i.e., positive and negative values:

<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() - Combining x-axis and z-axis values

Following is an example of translate3d() function with length values passed to x-axis and z-axis:

<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() - Combining y-axis and z-axis values

Following is an example of translate3d() function with length values passed to y-axis and z-axis, along with perspective() value:

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