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.