CSS Transforms Tutorial
Tags: css, programming, tutorial, writing
Published: 2022-07-28 06:36:00

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

For example:
```css
.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):
```css
.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):
```css
transform: skewX(15deg);
```
Skew along the y-axis (vertical):
```css
transform: skewY(15deg);
```
Skew along both axis simultaneously:
```css
transform: skew(15deg, 15deg);
```

### Rotate
The `rotate()` function rotates an element clockwise from its original position:
```css
transform: rotate(25deg);
```
We can use a negative value to rotate it in the opposite direction:
```css
transform: rotate(-25deg);
```

### Translate
The `translate()` function moves an element in a horizontal or vertical direction (from its original position):
```css
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:
```css
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:
```css
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:
```css
.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:
```css
.element {
  perspective: 100px;
  perspective-origin: left;
}
```
It positions the 3D object as if it’s being viewed from a different angle.

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)