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:

Example:

.div1{
  transform: rotate(20deg); /* Rotate <div> by 20 degree */ 
}
.div2{
  transform: rotate(-20deg); /* Rotate <div> by -20 degree */
}
.div3{
  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 given angle. Angle value can also be negative.
rotate3d(x,y,z,angle)Definens 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 element away from its original position.
translateX(x)Defines a translation along X-axis. Element moves horizontally.
translateY(y)Defines a translation along Y-axis. Element moves vertically.
translateZ(z)Defines a 2D translation alng Z-axis. Changes 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 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 elemet’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 in none.
inheritInherits the transform property from its parent element.

General Info

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