translate

Overview

The translate property is a convenient method to move elements along the X, Y, and Z axes without relying on the transform property. It offers a more straightforward approach for positioning elements, when compared to similar functions and allows control of the position of an element in 2D or 3D space without the need for complex calculations or order-specific syntax.

Examples and Usage

Below, you'll find nested divs containing different translate values that influence their behavior. We'll go over the differences in positioning for each of the following scenarios: X-axis, X and Y axes, and X, Y, and Z axes.

HTML Structure

<h2>Examples of the Translate Property</h2>

<div id="container">
  <div id="box1">Box1
    <div id="box2">Box2</div>
  </div>
</div>

Translate X-axis

We start by translating the inner div #box2 along the X-axis relative to its initial position within the parent div #box1. The CSS below moves #box2 50 pixels to the right while maintaining its position within the layout.

#container {
  height: 300px;
  background-color: #f5f5dc;
}

#box1 {
  position: relative;
  margin: auto;
  height: 150px;
  width: 250px;
  padding: 15px;
  border: 2px solid crimson;
}

#box2 {
  padding: 50px;
  position: absolute;
  border: 2px solid navy;
  background-color: green;
  translate: 50px; /* Moves the element 50px along the X-axis */
}

Translate X and Y axes

Here, we'll modify the translate value to move the inner div #box2 along both the X and Y axes, relative to its initial position within the parent div #box1.

#box2 {
  translate: 60% 5rem; /* Moves the element 60% along the X-axis and 5rem along the Y-axis */
}

Now, #box2 is moved 60% of its width to the right along the X-axis and 5rem down along the Y-axis.

Translate X, Y, and Z axes

To move the element along the X, Y, and Z axes, update both the #box1 and #box2 like so:

#box1 {
  perspective: 200px; /* Required for the Z-axis translation to take effect */
}

#box2 {
  translate: 10px 5rem 100px; /* Moves the element 10px along the X-axis, 5rem along the Y-axis, and 100px along the Z-axis */
}

With these changes, #box2 is moved 10px to the right along the X-axis, 5rem down along the Y-axis, and 100px into the screen along the Z-axis. The perspective property added to #box1 enables the Z-axis translation to take effect.

Values

The translate property accepts the following values:

Associated Properties

• transform
• scale
• rotate

Tips and Tricks

• The translate property can be a more convenient alternative to transform, especially when working with only the X and Y axes.

• The translate property is useful when you want to move an element without affecting the layout of surrounding elements. This is because the translated element doesn't change the overall flow of the document.

• You can use negative values to move the element in the opposite direction along the respective axis.

• When using percentage values for translation, the percentage is calculated based on the dimensions of the element itself. For instance, if an element has a width of 100px and the translate value is 50%, it will move 50px to the right along the X-axis.

Browser Compatibility

Caution: Early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers (see more in the Useful Resources below)

Useful Resources

Can I use - translate

CSS Transforms Module Level 2 - Individual Transforms