Jobs Hub

CSS transform: translate3d()

The CSS translate3d() function is used to define the transform property to move an element right/left on x-axis, up/down on y-axis, and front/back on z-axis, at once. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      #t3d {width: 160px; height: 160px; transform-style: preserve-3d;
         transform: rotate3d(12, -7, 1, 20deg); margin: 80px auto;}
      .a, .b, .c, .d {width: 100%; height: 100%; position: absolute;}
      
      .a {transform: translate3d(0); background: rgba(255, 0, 0, 0.72);}
      .b {transform: translate3d(60px, 0px, 0px); background: rgba(0, 255, 0, 0.72);}
      .c {transform: translate3d(60px, 60px, 0px); background: rgba(0, 0, 255, 0.72);}
      .d {transform: translate3d(60px, 60px, 60px); background: rgba(164, 164, 164, 0.72);}

   </style>
</head>
<body>
   
   <div id="t3d">
      <div class="a"></div>
      <div class="b"></div>
      <div class="c"></div>
      <div class="d"></div>
   </div>
   
</body>
</html>
Output

In above example, the first DIV (the DIV whose class name is a or red box) is at center, whereas remaining three DIVs are translated in this way:

Basically, the translate3d() function is used to define translateX(), translateY(), and translateZ() transformation to an element, at once. For example:

css translate3d example

In above example, the front face (face whose value is 1) of second Die gets moved by 20px to left on x-axis, 10px to up on y-axis, and 40px to front on z-axis.

Note - The transform-style property is used set whether the child elements are positioned in 3D space or not.

Note - The rotate3d() function rotates an element along x-axis, y-axis, and z-axis, at once, with a particular degree.

CSS translate3d() Syntax

The syntax of translate3d() function in CSS, is:

transform: translate3d(x, y, z);

Or

transform: translate3d(translateX(), translateY(), translateZ());

Note - We can use any valid length units to define all the three parameters of translate3d() function.

CSS Online Test

« Previous Tutorial Next Tutorial »