CSS transform : complete guide on CSS transform. Everything you need for good developer
Tags: css, html, webdev, beginners
Published: 2021-07-21 10:52:01

Hello, welcome. In today's article we'll learn about CSS transform properties. 

CSS transform is used to change shapes, scale the element, rotate it and much more. Let's see some transform properties.

#CSS transform

######Syntax
```CSS
.element{
    transform: value;
}
```

This is how we use css transform. Let's see some of it's value.

###Translate

Translate value is used to change element's position.

<table>
<th>Value</th>
<th>Description</th>
<tr>
<td>translateX(px) </td>
<td>it is used to place element in X axis</td>
</tr>
<tr>
<td>translateY(px) </td>
<td>it is used to place element in Y axis</td>
</tr>
<tr>
<td>translateZ(px) </td>
<td>it is used to place element in Z axis</td>
</tr>
<tr>
<td>translate(x,y) </td>
<td>This is a short form for translateX and translateY</td>
</tr>
<tr>
<td>translate3d(x,y,z) </td>
<td>This is a short form for translateX, translateY and translateZ</td>
</tr>
</table> 

######Example
![Frame 1 (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkbkgh1fkc2ik20u1cw5.png)

###Scale

Scale is used to scale element in x, y, z axis.

<table>
<th>Value</th>
<th>Description</th>
<tr>
<td>scaleX(px) </td>
<td>it is used to scale element in X axis</td>
</tr>
<tr>
<td>scaleY(px) </td>
<td>it is used to scale element in Y axis</td>
</tr>
<tr>
<td>scaleZ(px) </td>
<td>it is used to scale element in Z axis</td>
</tr>
<tr>
<td>scale(x,y) </td>
<td>This is a short form for scaleX and scaleY</td>
</tr>
<tr>
<td>scale3d(x,y,z) </td>
<td>This is a short form for scaleX, scaleY and scaleZ</td>
</tr>
</table>

######Example
![Translate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wvny7iwo0b1di1035qa.png)

###Rotate

Rotate value is used to rotate element's position.

<table>
<th>Value</th>
<th>Description</th>
<tr>
<td>rotate(deg) </td>
<td>It is used to rotate element in 2d dimension</td>
</tr>
<tr>
<td>rotateX(deg) </td>
<td>it is used to rotate element in X axis</td>
</tr>
<tr>
<td>rotateY(deg) </td>
<td>it is used to rotate element in Y axis</td>
</tr>
<tr>
<td>rotate3d(x,y,z, angle) </td>
<td>This is used to rotate element in 3d dimesion</td>
</tr>
</table> 

######Example
![Translate (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3fqujn46uc3fmiwhryz.png)
 

>RotateX and RotateY value will behave like scale if you don't use perspective.
>Use prespective property like this. For example, our HTML structure is like
>```HTML
<div class="parent">
    <div class="element"></div>
</div>
```
> Then we give CSS like this.
>```CSS
.parent{
   perspective: 1000px;
}
.element{
   transform: rotateX(10deg);
}
```
>######Output
>![Translate (3)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbiunjvhcwnfg3gmfyuu.png)
 
>You should give perspective property to the parent.

###Skew 
Skew value is used to define 2D skew transformation.

<table>
<th>Value</th>
<th>Description</th>
<tr>
<td>skewX(deg) </td>
<td>it is used to skew element in X axis</td>
</tr>
<tr>
<td>skewY(deg) </td>
<td>it is used to skew element in Y axis</td>
</tr>
<tr>
<td>skew(deg) </td>
<td>it is a short form for skewX and skewY</td>
</tr>
</table>

######Example
![Translate (4)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiycml2q7h7e1ickxzsp.png)

So, that's sit about CSS transform values. I hope you understood each and everything. If you have doubt or I missed some point let me know in the comments.

#Articles you may found Useful
1. [CSS Positions](https://dev.to/kunaal438/css-position-everything-you-need-for-good-developer-pfh)
2. [CSS Media Query](https://dev.to/kunaal438/media-query-everything-you-need-for-responsive-design-b8g)
3. [CSS flex box](https://dev.to/kunaal438/display-flex-complete-guide-on-css-flex-box-2021-5bi2)

And if you want to improve your webdev skills. You can watch tutorial on [Disney+ clone](https://youtu.be/ZeY9RicS2js) clone by me. If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [<a href="https://www.youtube.com/c/modern_web?sub_confirmation=1">Subscribe</a>], [<a href="https://www.instagram.com/modern_web_channel/">Instagram</a>]

Thanks For reading.