DEV Community

loading...
Cover image for CSS transform : complete guide on CSS transform. Everything you need for good developer

CSS transform : complete guide on CSS transform. Everything you need for good developer

Modern Web
Hello, I am kunaal a fullstack developer.I have a youtube channel "Modern Web" where I teach to make awesome web UI/ UX. Don't forget to checkout my youtube channel
Updated on ・3 min read

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Value Description
translateX(px) it is used to place element in X axis
translateY(px) it is used to place element in Y axis
translateZ(px) it is used to place element in Z axis
translate(x,y) This is a short form for translateX and translateY
translate3d(x,y,z) This is a short form for translateX, translateY and translateZ
Example

Frame 1 (2)

Scale

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

Value Description
scaleX(px) it is used to scale element in X axis
scaleY(px) it is used to scale element in Y axis
scaleZ(px) it is used to scale element in Z axis
scale(x,y) This is a short form for scaleX and scaleY
scale3d(x,y,z) This is a short form for scaleX, scaleY and scaleZ
Example

Translate

Rotate

Rotate value is used to rotate element's position.

Value Description
rotate(deg) It is used to rotate element in 2d dimension
rotateX(deg) it is used to rotate element in X axis
rotateY(deg) it is used to rotate element in Y axis
rotate3d(x,y,z, angle) This is used to rotate element in 3d dimesion
Example

Translate (2)

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

Translate (3)

You should give perspective property to the parent.

Skew

Skew value is used to define 2D skew transformation.

Value Description
skewX(deg) it is used to skew element in X axis
skewY(deg) it is used to skew element in Y axis
skew(deg) it is a short form for skewX and skewY
Example

Translate (4)

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.

Discussion (10)

Collapse
afif profile image
Temani Afif • Edited

rotate3D() has nothing to do with what you described ! please verify your sources, some of what you are writing here is false. and most of the 3D transformation are related to perspective so they have no effect without.

Collapse
kunaal438 profile image
Modern Web Author • Edited

w3schools.com/cssref/css3_pr_trans...
See here, you will find these properties.

Collapse
afif profile image
Temani Afif

I knew it .. you are picking the worst source ...

Thread Thread
kunaal438 profile image
Modern Web Author

Yes you know everything.👍👍

Collapse
afif profile image
Temani Afif

why are you hidding my comments? I am correcting you .. you want people to see wrong information?

Show me one example using scaleZ() and the rotate3d() you are showing.

Collapse
kunaal438 profile image
Modern Web Author

Ok I was wrong about rotate3d. I correct that on the article and maybe you know more that you can only see person mistake. I am happy you are more knowledgeable than w3school. They should asked you before writing something.

Collapse
afif profile image
Temani Afif

show me where in w3school it's written This is a short form for rotateX, rotateY and rotateZ ? you are wrong. I never claimed w3school are wrong, they are simply bad.

Thread Thread
kunaal438 profile image
Modern Web Author

Ok It was my mistake. I should have checked it before writing. Thanks for the correction. I am sorry for being rude.

Collapse
shreykr profile image
Shreyas K R • Edited

Wait, w3schools is bad? In what way and if so what else is a good source to learn the basic stuffs from?

Some comments have been hidden by the post's author - find out more