This property is used to apply a 2D or 3D transformation to an element. We can set below values: –

• translate()
• rotate()
• scale()
• skew()
• matrix()

Ex:-

div { transform: rotate(20deg); }

translate( )–

This method is used to move an element from its current position.

Syntax: –

transform: translateX(px)

transform: translateY(px)

transform: translate(Xpx, Ypx)

Ex: –

transform: translateX(10px)

transform: translateY(5px)

transform: translate(10px, 5px)

rotate( )–

This method is used to rotate an element clockwise or anti-clockwise according to a given degree.

Using negative values will rotate the element anti-clockwise.

Syntax: –

transform: rotate(ndeg)

Ex: –

transform: rotate(50deg)

transform: rotate(-40deg)

scale( )–

This method is used to increases or decreases the size of an element

Syntax: –

transform: scaleX(width)
transform: scaleY(height)
transform: scale(width, height)

Ex: –

transform: scaleX(3)
transform: scaleY(4)
transform: scale(3, 4)

skew()–

This method is used to skews an element along the X and Y-axis by the given angles.

Syntax: –

transform: skewX(deg)
transform: skewY(deg)
transform: skew(Xdeg, Ydeg)

Ex: –

transform: skewX(30deg)
transform: skewY(40deg)
transform: skew(30deg, 40deg)
transform: skew(30deg)

matrix()–

This method is used to combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.

The parameters are as follow:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Syntax: –

transform:

Ex: –

transform:

none–

No transform

Ex: –

transform: none;

Tagged : css / HTML / matrix() / property / rotate() / scale() / skew() / Transform / translate()