CSS - 2D Transforms

CSS transforms are used to modify the element’s shape and sizes and are responsible for movements of elements in two-dimensional space using functions like translate(), scale(), rotate(), and skew(). These functions allow you to move, scale, rotate, and skew elements along the X and Y axes, creating various visual effects and manipulations.

2D Transform3D Transform

Table of Contents

CSS 2D TranslateCSS 2D RotateCSS 2D ScaleCSS 2D SkewCSS 2D Transform Related Functions

CSS 2D Translate

CSStranslate()function moves an element along the X and Y axes.

Example

The following example shows a box that moves along these axes when hovered over.

CSS 2D Rotate

CSSrotate()function rotates an element around a specified point on the 2D plane.

Example

The following example shows a box that rotates when hovered over, creating a dynamic effect.

CSS 2D Scale

CSSscale()function scales an element along the X and Y axes.

Example

The following example shows a box that scales up and down when hovered over, creating a zoom effect.

CSS 2D Skew

CSSskew()function skews an element along the X and Y axes.

Example

The following example shows a box that skews when hovered over, creating a slanted effect.

CSS 2D Transform Related Functions

The following table lists all the various functions that are used to transform elements in the two-dimensional space.

FunctionDescriptionExampletranslate()CSStranslate()function translates an element along the X and Y axes.Try Itrotate()CSSrotate()function rotates an element around a point in 2D space.Try Itscale()CSSscale()function scales an element along the X and Y axes.Try Itskew()CSSskew()function skews an element along the X and Y axes.Try Ittransform()CSStransform()function applies a 2D or 3D transformation to an element.Try It