## 2D Transform Functions

These occur along a cartesian plane with an x & y axis.

**X-axis:** horizontal / width.

**Y-axis:** vertical / height.

### Scale Function

Used to transform the size of elements.

#### How to Use:

```
transform: scale(x); // width and height are multiplied by x.
transform: scale(x,y); // width is multiplied by x. height is multiplied by y.
transform: scaleX(x); // width is multiplied by x.
transform: scaleY(x); // height is multiplied by x.
```

###### Why Use Scale Function When You Can Change Width & Height of Element?

- Using transform does not affect flow of document. In other words, an elements that has been scaled up, won’t affect position of other elements.
- Scaling an element not only affects element dimensions, but other styles applied to the elements, such as padding, margin, border-width and box-shadow.

### Translate Function

Used to move elements.

**How to Use:**

```
transform: translate(x); // move element by x on x-axis.
transform: translate(x,y); // move element by x on x-axis and by y on y-axis.
transform: translateX(x); // if x is positive, element moves to right. if negative moves to left.
transform: translateY(x); // if x is positive, element moves down. if negative moves up.
```

###### Tips:

- Can use a variety of units (ie. pixels / percentage / em)
- Reference is element itself, not its parent element.

### Rotate Function

Used to rotate elements.

**How to Use:**

```
transform: rotate(x); // rotate element by x degrees.
transform: rotateX(x); // rotate element on x-axis.
transform: rotateY(x); // rotate element on y-axis.
```

###### Tips:

- Note that when rotating an element on one axis only, it can get confusing because the element is being rotated in 2D space – the effect is flat, so element will appear squeezed.
- When you are rotating an element, you are also rotating the axis.

### Skew Function

Used to skew elements.

#### How to Use:

```
transform: skew(x); // skew element by angle of x.
transform: skewX(x); // skew element by angle of x on x-axis.
transform: skewY(x); // skew element by angle of x on y-axis.
```

## Why Use Transform?

There is an important difference when it comes to performance – transformation is hardware accelerated. Because the browser expects changes to happen to an element, performance is better.

### Transform Origin

By default, transform origin is always the center of the element.

```
transform-origin: 50% 50%;
// or
transform-origin: center center;
```

###### Check out this codepen for a sense of how altering the transform-origin can affect the final result.

### Multiple Transformations

- Separate different transformations with a space, not a comma
`transform: translate(x) rotate(45deg);`

- Note that the order of your transformations will effect the final result. This is important to keep in mind when you are applying a rotate transform to an element (as rotate alters the axis)

## Transformation in Action

Hover over button & watch it transform