What is CSS Transforms property?

General Discussions
,
#1

What is CSS Transforms property?

#2

Hi Dipen,

CSS transforms are functions that are used to change the coordinate system within a 2D viewing area. They allow elements like layers to be transformed in 3D space. Transforms can be used to move and reshape elements in the 2D plane, as well as to create a sense of depth when using perspective and vanishing point techniques.

When there’s a change in the state of an HTML element, the CSS transform property takes action to rotate, move, or scale its corresponding element. It occurs when you hover your mouse over a button or perform a mouse-click on an element, like on a button to select it.

There are three variations of CSS Transform properties in 2D.

  1. transform: TpropertyX(x);
  2. transform: TpropertyY(y);
  3. transform : Tproperty(x,y);

Translate: This property enables you to change the x and y coordinates of the element on the page.

Skew: It is used to tilt an element in a specific direction. It affects the X and Y axes by x-skewing it horizontally, and y-skewing it vertically.

Scale: The scale property is used to change the size of an element. The scale property can be set in X or Y direction.

Rotate: This property allows you to rotate an element in clockwise or anticlockwise directions by a specified number of degrees.

To deep dive into each of these properties in detail, please go through the following blog:

1 Like