# translate3d()

Czytasz angielską wersję tego artykułu, ponieważ nie ma jeszcze tłumaczenia dla tego języka. Pomóż nam przetłumaczyć ten artykuł!

The `translate3d()` CSS function repositions an element in 3D space. Its result is a `<transform-function>` data type.

This transformation is characterized by a three-dimensional vector. Its coordinates define how much the element moves in each direction.

## Syntax

```translate3d(tx, ty, tz)
```

### Values

`tx`
Is a `<length>` or `<percentage>` representing the abscissa of the translating vector.
`ty`
Is a `<length>` or `<percentage>` representing the ordinate of the translating vector.
`tz`
Is a `<length>` representing the z component of the translating vector. It can't be a `<percentage>` value; in that case the property containing the transform is considered invalid.
Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3

This transformation applies to the 3D space and can't be represented on the plane.

A translation is not a linear transformation in ℝ3 and can't be represented using a Cartesian-coordinate matrix. $\left(\begin{array}{ccc}10& 0& tx\\ 01& 0& ty\\ 0& 0& 1& tz\\ 0& 0& 0& 1\end{array}\right)$

## Examples

### Using a single axis translation

#### HTML

```<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>```

#### CSS

```div {
width: 60px;
height: 60px;
background-color: skyblue;
}

.moved {
/* Equivalent to perspective(500px) translateX(10px) */
transform: perspective(500px) translate3d(10px, 0, 0px);
background-color: pink;
}
```

### Combining z-axis and x-axis translation

#### HTML

```<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>```

#### CSS

```div {
width: 60px;
height: 60px;
background-color: skyblue;
}

.moved {
transform: perspective(500px) translate3d(10px, 0, 100px);
background-color: pink;
}
```

## Specifications

Specification Status Comment
CSS Transforms Level 2
The definition of 'translate3d()' in that specification.
Editor's Draft Initial definition

## Browser compatibility

Please see the `<transform-function>` data type for compatibility info.