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:
| none | Defines 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. |
| initial | Sets the transform property to its default value. Which is none. |
| inherit | Inherits the transform property from its parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.transform = “rotate(10deg)” |
