CSS transform - Master CSS transform ? Learn to rotate, scale and much more
Tags: html, css, webdev, beginners
Published: 2022-01-06 13:31:01

If you struggle with CSS transform or don’t know what it is. This article is for you. In this article you’ll not only learn what is CSS transform and how to use it. But you even see its properties and learn how you can make 3d objects. The video is very simple covering the topic for you. And at the end of the video you get 3 designs which are very amazing to make. I bet if you make those 3 design, you’ll not feel you don’t know about transform anymore.

#Video Tutorial
You can watch video tutorial for better understanding with live example.
{% youtube BEkE9lzpaKw %}

#Who am I ?

Before we start, if you don't know me. Well, I am Kunaal from India manage Modern Web YouTube channel. I make content on web development to master your web dev skills, I made tutorials on [Fullstack Ecom website](https://www.youtube.com/playlist?list=PLqm86YkewF6S45smPYeNv01aFFKWZSgYD),[Personal Portfolios](https://www.youtube.com/playlist?list=PLqm86YkewF6QS_knm-9-dc4tTKgbQI-zZ), [Fullstack Blogging website](https://www.youtube.com/playlist?list=PLqm86YkewF6RU_k6jymVX7EavJ1w9i4VW), [Amazing Headers Animations](https://www.youtube.com/playlist?list=PLqm86YkewF6TEYXEoyVUdDmmIEJ1TzORZ) and much more. If that excites you, you can visit my [channel](https://www.youtube.com/channel/UCoygqHsdILWZFlfI5RMC-dw/).

So without wasting more time lets start.

#Tansform

###So what is CSS transform exactly.

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

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

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

###Translate

The first property of it is 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 why is that we will talk at last.

###Skew 
Skew value is used to slant the element.

<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 these was some CSS transform properties. But we donhave some more properties. 

#Transform Origin

Well, all the things we learnt till now in this article was a value of `transform` property. But `transform-origin` is a property itself. And its value could be a numerical value like `100px | 10%` or can simply be the corners name. 

Well, up until now, all the transform was happening from the elements centre, because it was the origin of the elements. But what if I want to rotate the div from `top left` side. Fir exactly this purpose, we have `transform-origin`.

![CSs transform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8tbaf5u7z1bklrn2fr4.png)
 
It let's you define the origin of transformation of the element.

#Perspective

And the last we have perspective. Remember `rotateX` and `rotateY` was behaving like `scale` that was because of this perspective.

Perspective is a viewpoint or viewing angle. And this define a viewing angle which make the element 3d.

![CSS transform](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47a3uiugxtht26viib4x.png)
 
So if we rotate that div along X axis using perspective property like this.

```CSS
.parent{
   perspective: 1000px;
}
.element{
   transform: rotateX(10deg);
}
```
You'll see something like this.
![Translate (3)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbiunjvhcwnfg3gmfyuu.png)
Now, it is 3d, right? So this was perspective. Remember we give this property to the parent element. because we set this to the element itself it will not affect because of the same viewing angles. And also the lesser the value of perspective, closer the element to the screen.

#Wrap up

So, that's it. That was all about CSS Transform. If you liked the article and found it helpful, make sure sure to follow me and you can also show your appreciation by simply subscribing my youtube channel. I make awesome web dev content though 😉

<a href="https://www.youtube.com/c/modern_web?sub_confirmation=1"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jeitpawvax07cx7r9yoa.png"></a>

So, As I decided to make advance CSS series, then I will do it on my style. And according to me its not enough that I'll tell you how to use it. You also have to practice it. For that, I made 3 designs for you that you can make using CSS Transfom for practice. 

[Design 1](https://drive.google.com/file/d/1ujRNHdi2y6ET9VUXJyA0hB9C0jm7FSrE/view?usp=sharing), [Design 2](https://drive.google.com/file/d/195MMd9f5xkr4pdmDbpDT4JOUIQ4uzGGz/view?usp=sharing), [Design 3](https://drive.google.com/file/d/1fh3Dq7EsTEXijHzYSVCsTP5X8ferolhN/view?usp=sharing )

Well, make sure you code the above designs, it will motivate me to continue this CSS series. And make sure to submit it to me by tagging me on my instagram `@modern_web_channel`

If you stuck anywhere, or have any doubt feel free to ask me. 

Thanks for reading 😊

#Articles you may find Useful

1. [Best CSS Effect](https://dev.to/kunaal438/css-the-best-css-effects-of-all-time-most-underrated-web-ux-2chj)
2. [Infinte CSS loader](https://dev.to/kunaal438/quick-css-make-infinity-loading-animation-for-your-next-website-187k)
3. [Disney+ Clone](https://dev.to/kunaal438/how-to-create-disney-plus-clone-for-beginner-in-2021-html-css-js-m3p)
4. [Youtube API - Youtube Clone](https://dev.to/kunaal438/create-working-youtube-clone-with-search-box-youtube-api-2a6e)
5. [TMDB - Netflix Clone](https://dev.to/kunaal438/how-to-create-netflix-clone-netflix-clone-with-hmtl-css-js-989)