# translate3d()

## Summary

Transform function for a 3d translation which moves an element on x-axis, y-axis and z-axis by the given values.

## Syntax

**translate3d ( <translation-value-x>, <translation-value-y>, <translation-value-z> )**

## Parameters

**translation-value-x, translation-value-y, translation-value-z**

*translation-value-x and translation-value-y represent vector values x and y and can be a length or a percentage value.*

*translation-value-z is the third vector value and defines the translation in the direction of the z-axis (3rd dimension).* **Attention:** *It can only be a length value, percentage is not supported.*

## Examples

The example shows three div elements, that are transformed individually with the translateY() function.

- The translation of the first element moves it 150 pixels to the right along the x-axis.
- The second element is moved 120 pixels down along the positive direction of the y-axis.
- The last translation of element-3 is moving the div 120 pixels in the negative direction of the z-axis. Note that you have to apply a value for the perspective also, since without it the translation is not visible.

```
.element-1 {
transform: translate3d(150px, 0, 0);
}
.element-2 {
transform: translate3d(0, 120px, 0);
}
.element-3 {
transform: perspective(400) translate3d(0, 0, -120px);
}
```

## See also

### Related articles

#### Transforms

**translate3d()**

### External resources

- CSS Transforms Module, Level 3, Section 13.2
- Mathematical Description of Transform Functions
- Hands On: 3-D Transforms

## Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]