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

.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.

Example

Scale

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

Example

Rotate

Rotate value is used to rotate element's position.

Example

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

<div class="parent">    <div class="element"></div></div>

Then we give CSS like this.

.parent{   perspective: 1000px;}.element{   transform: rotateX(10deg);}

Output

You should give perspective property to the parent.

Skew

Skew value is used to define 2D skew transformation.

Example

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
2. CSS Media Query
3. CSS flex box

And if you want to improve your webdev skills. You can watch tutorial on Disney+ clone clone by me. If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [Subscribe], [Instagram]

Thanks For reading.