# CSS 3D Transforms

You can use CSS 3D transform feature you can perform basic transform manipulations such as move, rotate, scale and skew on elements in a three-dimensional.

The transformed element does not affect the surrounding elements, but can overlap them, just like the absolutely positioned elements.

The following are the CSS 3D transformation functions:

- rotate3d
- scale3d
- matrix3d
- translate3d

## The CSS rotate3d Function

The rotate3d() css function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it.

### Syntax:

`rotate3d(x, y, z, angle)`

- x - Describing the x-coordinate of the vector denoting the axis of rotation which could be between 0 and 1.
- y - Describing the y-coordinate of the vector denoting the axis of rotation which could be between 0 and 1.
- z - Describing the z-coordinate of the vector denoting the axis of rotation which could be between 0 and 1.
- angle - Defines the rotation of the element. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.

#### Example

```
.example {
transform: rotate3d(1, 2, -1, 192deg);
}
```

## The CSS scale3d Function

The scale3d() css function defines a transformation that resizes an element in 3D space.

Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales.

### Syntax:

`scale3d(sx, sy, sz)`

- sx - Defines the abscissa of the scaling vector.
- sy - Defines the ordinate of the scaling vector.
- sz - Defines the z-component of the scaling vector.

#### Example

```
.example {
transform: scale3d(2, 0.5, 0.2);
}
```

## The CSS matrix3d Function

The matrix3d() css function defines a 3D transformation as a 4x4 homogeneous matrix.

### Syntax:

`matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)`

- a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 - numbers describing the linear transformation.
- a4 b4 c4 d4 - numbers describing the translation to apply.

#### Example

```
img:hover {
transform: matrix3d(0.5, 0, -0.866025, 0, 0.595877, 1.2, -1.03209, 0, 0.866025, 0, 0.5, 0, 25.9808, 0, 15, 1);
}
```

## The CSS translate3d Function

The translate3d() css function repositions an element in 3D space.

### Syntax:

`translate3d(translateX, translateY, translateZ)`

- translateX - Specifies the length or percentage representing the abscissa of the translating vector.
- translateY - Specifies the length or percentage representing the ordinate of the translating vector.
- translateZ - Specifies the length representing the z component of the translating vector.

#### Example

```
.example {
transform: translate3d(10px, 10px, 10px);
}
```

## All CSS 3D Transform Properties

Property | Description |
---|---|

backface-visibility | Sets whether or not the back face of an element should be visible when facing the user. |

perspective | Determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective. |

perspective-origin | Determines the position at which the viewer is looking. |

transform | Lets you rotate, scale, skew, or translate an element. |

transform-origin | Sets the origin for an element's transformations. |

transform-style | Sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element. |

## All CSS 2D Transform Functions

Function | Description |
---|---|

rotate3d() | Defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. |

scale3d() | Defines a transformation that resizes an element in 3D space. |

matrix3d() | Defines a 3D transformation as a 4x4 homogeneous matrix. |

translate3d() | Repositions an element in 3D space. |