CSS transform property

CSS transform

CSS transform property is used to apply 3D or 2D transformation to an element.

Transformation is done by applying properties, such as move, scale, skew, rotate, etc.

Each property does different transformation to the element.

CSS transform property values are


matrix value for css transform property

1 => Rotate left 2 => strich to horizontal position 3 => strich to vertical position 4 => Rotate Right 5 => from left 6 => from top

Example

Try Yourself

matrix3d value for css transform property

Example

Try Yourself

translateX(x) value for css transform property

Example

Try Yourself

translateY(y) value for css transform property

Example

Try Yourself

translateZ(z) value for css transform property

Example

Try Yourself

translate(x,y) value for css transform property

Example

Try Yourself

translate3d(x,y,z) value for css transform property

Example

Try Yourself

scaleX(x) value for css transform property

Example

Try Yourself

scaleY(y) value for css transform property

Example

Try Yourself

scaleZ(z) value for css transform property

Example

Try Yourself

scale(x,y) value for css transform property

Example

Try Yourself

scale3d(x,y,z) value for css transform property

Example

Try Yourself

rotate(angle) value for css transform property

Example

Try Yourself

rotateX(angle) value for css transform property

Example

Try Yourself

rotateY(angle) value for css transform property

Example

Try Yourself

rotateZ(angle) value for css transform property

Example

Try Yourself

rotate3d(x,y,z,angle) value for css transform property

Example

Try Yourself

skewX(angle) value for css transform property

Example

Try Yourself

skewY(angle) value for css transform property

Example

Try Yourself

skew(x-angle,y-angle) value for css transform property

Example

Try Yourself

perspective(n) value for css transform property

Example

Try Yourself