CSS transform Property

CSS transform property is used to apply 2D or 3D transformations on elements such as ‘rotate’, ‘move’, ‘skew’, ‘scale’, ‘translate’, etc.

See the transformed elements below:

Rotated 20deg
Rotated -20deg
Skewed 20deg

The transform property takes the help of some inbuilt functions to apply transformation on the elements. For example, to rotate elements we have an inbuilt function rotate(), to skew elements there is an inbuilt function skew(), and so on. Try out the example below to see how the transformation works:


  transform: rotate(20deg); /* Rotate <div> by 20 degree */ 
  transform: rotate(-20deg); /* Rotate <div> by -20 degree */
  transform: skew(20deg); /* Skew <div> by 20 degree */

CSS Syntax

The transform property has the following syntax:

transform: none | transform-function | initial | inherit;

Property Values

The transform property accepts several transformation functions such as ‘rotate()’, ‘skew()’, ‘translate()’, etc. as its value . See the list below:

noneDefines no transformation. This is the default value.
rotate(angle)Rotates the element by a given angle. Angle value can also be negative.
rotate3d(x,y,z,angle)Defines 3D rotation of an element.
rotateX(angle)Defines a rotation along X-axis.
rotateY(angle)Defines a rotation along Y-axis.
translate(x,y)Defines a 2D translation. Moves the element away from its original position.
translateX(x)Defines a translation along X-axis. The element moves horizontally.
translateY(y)Defines a translation along Y-axis. The element moves vertically.
translateZ(z)Defines a 2D translation along Z-axis. Changes the user perspective and creates a 3D effect.
translate3d(x,y,z)Defines a 3D translation.
scale(x,y)Defines a 2D scale transformation of the element. Resizes the element’s width and height relative to its original shape.
scaleX(x)Defines a scale transformation along the X-axis. Resizes element’s width.
scaleY(y)Defines a scale transformation along the Y-axis. Resizes element’s height.
scaleZ(z)Defines a scale transformation along the Z-axis.
scale3d(x,y,z)Defines a 3D scale transformation.
skew(angleX, angleY)Defines a 2D skew transformation.
skewX(angle)Defines a skew transformation along X-axis.
skewY(angle)Defines a skew transformation along Y-axis.
perspective(length)Sets a distance between the z=0 plane and the user to create a 3D perspective. The length value can be specified in ‘px’, ’em’, ‘rem’, etc.
matrix()Defines a homogeneous 2D transformation.
matrix3d()Defines a homogeneous 3D transformation using a 4×4 matrix.
initialSets the transform property to its default value. Which is none.
inheritInherits the transform property from its parent element.

General Info

Default Valuenone
JavaScript Usageelement.style.transform = “rotate(10deg)”


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment