The `transform`

property allows us to visually manipulate elements by scaling, skewing, rotating, or translating them.

For example:

```
.element {
width: 30px;
height: 30px;
transform: scale(10);
}
```

Despite our height and width declarations, the transform scales our element to ten times its original size!

Transforms are especially fun when combined with animations.

## Transform functions

We can use the following functions:

`scale()`

: scales the size of an element.`skew()`

: turns an element to its left or right.`rotate()`

: rotates an element clockwise from its current position.`translate()`

: repositions an element in a horizontal or vertical direction.`perspective()`

: sets the depth used in 3D transforms.

Let’s take a look at each!

### Scale

The `scale()`

function is a shorthand for `scaleX()`

and `scaleY()`

.

`scaleX()`

resizes an element along its x-axis (horizontally) and `scaleY()`

along its y-axis (vertically).

For example, lets scale the `.element`

width by 2 (doubling its width) and reduce its height by 0.5 (reducing by half):

```
.element {
transform: scale(2, 0.5);
}
```

The first parameter is `scaleX()`

and the second `scaleY()`

.

### Skew

The `skew()`

function tilts an element left or right. It’s also shorthand for `skewX()`

and `skewY()`

.

Skew along the x-axis (horizontal):

```
transform: skewX(15deg);
```

Skew along the y-axis (vertical):

```
transform: skewY(15deg);
```

Skew along both axis simultaneously:

```
transform: skew(15deg, 15deg);
```

### Rotate

The `rotate()`

function rotates an element clockwise from its original position:

```
transform: rotate(25deg);
```

We can use a negative value to rotate it in the opposite direction:

```
transform: rotate(-25deg);
```

### Translate

The `translate()`

function moves an element in a horizontal or vertical direction (from its original position):

```
transform: translate(50px, 10px);
```

Here our element will have moved 50px (to the right) on its horizontal axis, and 10px (down) on its vertical axis.

This is shorthand for:

```
transform: translateX(50px);
transform: translateY(10px);
```

To instead move to the left or up, we’d simply use negative values.

We can use any valid length value, like `px`

, `em`

& `rem`

.

### Combining multiple transforms

Multiple transforms can be combined, by separating each function with a space:

```
transform: rotateY(30deg) scaleX(2) translateX(200px);
```

## 3D transforms

With 3D transforms, we add a third “z” axis, which adds the depth dimension.

The following additional functions control the Z axis:

`translateZ()`

`rotateZ()`

`scaleZ()`

For these we have the corresponding shorthands of `translate3d()`

, `rotate3d()`

and `scale3d()`

. For when we want to combine `translateX()`

, `translateY()`

and `translateZ()`

.

### Perspective

The `perspective`

property specifies how far away a 3D object appears from the viewer:

```
.element {
perspective: 100px;
}
```

A lower value will result in a more intense 3D effect than a higher value.

Note that when defining `perspective`

for an element, the **child** elements get the perspective view, **not** the element itself.

### Perspective-origin

The `perspective-origin`

property defines at which position the user is looking at the 3D object:

```
.element {
perspective: 100px;
perspective-origin: left;
}
```

It positions the 3D object as if it’s being viewed from a different angle.