CSS 3 transform feature is used to change the shape or appearance of an HTML element either in two dimensions(`2D`

Transform) or three dimension(`3D`

Transform) using transform property.

The CSS3 transform is a process of transforming an HTML element. It is of two types.

- 1.0
`2D Transformation`

- 2.0
`3D Transformation`

It is used to transform the HTML element in two dimension direction such as `x-axis`

or `y-axis`

. It has followings important methods.

`translate()`

`scale()`

`skewX()`

`skewY()`

`rotate()`

`matrix()`

The `translate()`

method is used to transform an HTML element in the `X`

or `Y`

axis.

The `translateX()`

function is used to to move an element along the `X-axis`

only.

The `translateY()`

function is used to move an element along `Y-axis`

only.

The transform `scale()`

method is used to scale the HTML element along the `X-axis`

, `Y-axis`

, or both the axis. The scale contains one or two properties inside the parenthesis.

If the `scale()`

method contains single properties then it scales the HTML element on both the `X`

and `Y`

axis. If the `scale()`

method contains two properties then the first value is used to transform the HTML element in `X-axis`

and the second value transforms the HTML element in `Y-axis`

.

The `skewX()`

function is used to skews an HTML element along the `X-axis`

by the specified angle.

The `skewY()`

function is used to skews an HTML element along the Y-axis by the specified angle.

Transform skew() function is used to skew the HTML element on the X-axis and Y-axis by the given angles.

The `rotate()`

function is used to rotate the HTML element along `X-axis`

,`Y-axis`

or `Z-axis`

around its origin by the given angles. The origin of the rotating element can be defined using the transform-origin property.

Please keep in mind that the default transform-origin is the center center.

Followings are the transform origin property:

`transform:rotateZ()`

`transform:rotateX()`

`transform:rotateY()`

`rotate(50deg)`

rotates the image in the clockwise direction about its origin by the angle of `50`

degrees. You can use negative values to rotate the element counter-clockwise.

Let us rotate HTML element along z-axis by 180deg.

Let us rotate HTML element around `X-axis`

by 70deg.

Let us rotate, the HTML element around `Y-axis`

by 180deg.

The `matrix()`

function is a combination of `scaleX()`

, `skewY()`

, `skewX()`

, `scaleY()`

, `translateX()`

& `translateY()`

. It takes six parameters in the form of a matrix which can be written as `matrix(a, b, c, d, e, f)`

.

so, in simple terms, the syntax is like –

Here, `a`

& `d`

help in scaling up or down the elements. It is like `scale(a,d)`

.

Similarly, `b`

,`c`

skew the element in the `X`

, and `Y`

axis respectively. It is like `skew(b,c)`

.

While, `e`

, `f`

help to translate the element(move the element) from one position to another. It is like `translate(e,f)`

.

×