In this article, we will learn about Transform in CSS.

CSS Transform

The transform property in CSS changes the position and shape of the selected element without disrupting the normal document flow, by modifying the coordinate space of the element. and in this tutorial, will teach you how to use transforms.

CSS transforms are created by applying affine linear transformations to HTML elements using a set of CSS properties. In both plane and 3D space, these transformations include rotation, skewing, scaling, translation etc.

CSS Transforms Properties

CSS transforms are defined by two major properties: transform and transform-origin.

transform-origin

The origin’s position is specified. It is at the centre of the element by default and can be moved. It’s used by several transforms that require a specific point as a parameter, such as rotations, scaling, and skewing.

transform

The transforms that will be applied to the element are specified here. It’s a list of transforms separated by spaces that are applied in the order requested by the composition operation. In order to be effective, composite transforms must be applied from right to left.

Syntax:

transform: none|transform-functions|initial|inherit;

CSS Transform Property Values

• scale(): Affects the element’s size. This also applies to an element’s font size, padding, height, and width. It also serves as a shortcut for the scaleX and scaleY functions.
• skewX() and skewY(): Turns a rectangle into a parallelogram by tilting it to the left or right. By accepting both values, skew() is a shorthand for skewX() and skewY().
• translate(): Moves an element left and right or up and down.
• rotate(): Rotates the element from its current position clockwise.
• matrix(): A function that combines all transforms into one and is probably not intended to be written by hand.
• perspective(): has no effect on the element itself, but it does affect the 3D transforms of descendent elements, ensuring that they all have the same depth perspective.

/* Keyword values */ transform: none; /* Function values */ transform: matrix(n,n,n,n,n,n); transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n); transform: perspective(n); transform: rotate(angle); transform: rotate3d(x,y,z,angle); transform: rotateX(angle); transform: rotateY(angle); transform: rotateZ(angle); transform: translate(x,y); transform: translate3d(x,y,z); transform: translateX(x); transform: translateY(y); transform: translateZ(z); transform: scale(x,y); transform: scale3d(x,y,z); transform: scaleX(x); transform: scaleY(y); transform: scaleZ(z); transform: skew(x-angle, y-angle); transform: skewX(angle); transform: skewY(angle); /* Multiple function values */ transform: translateX(x) rotate(angle) translateY(y); transform: perspective(n) translate(x,y) rotateY(angle); /* Global values */ transform: inherit; transform: initial; transform: revert; transform: unset;

Example:

Move the slider to rotate the box

That’s all about the Transform property in CSS.

You may like Transitions in CSS | Web Development.

Hope this article will guide you to recognize all about the Transform property in CSS that you needed and still if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.