CSS — Part-7- Transform

CSS transforms allow you to move, rotate, scale, and skew elements.
It modifies the coordinate space of the CSS visual formatting model.

A transformation is applied to the coordinate system an element renders into through the transform property.

2D Transform Methods

The methods for 2D Transforms are —

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

The translate() Method

• The translate() method moves an element from its current position to top/left/bottom/right (according to the parameters given for the X-axis and the Y-axis).
• These values would be any length value, like 10px or 2.4em

div {
  transform: translate(50px, 100px);
}

The rotate() Method

• The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
• Using negative values will rotate the element counter-clockwise.

div {
  transform: rotate(20deg);
}
div {
  transform: rotate(-20deg);
}

The scale() Method

• The scale() method increases or decreases the size of an element
• The below example increases the <div> element to be two times of its original width, and three times of its original height

div {
  transform: scale(2, 3);
}

The scaleX() Method

• The scaleX() method increases or decreases the width of an element.

Double the width :-

div {
  transform: scaleX(2);  // doubles the width 
}

Half of the width:-

div {
  transform: scaleX(0.5);
}

The scaleY() Method

• The scaleY() method increases or decreases the height of an element.

Three times of the height:

• Without scaleY

div {
  margin: 150px;
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

• With ScaleY(3)

div {
  margin: 150px;
  width: 200px;
  height: 100px;
  border: 1px solid black;
  transform: scaleY(3);
}

The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.

div {
  transform: skewX(20deg);
}

The skewY() Method

The skewY() method skews an element along the Y-axis by the given angle.

div {
  transform: skewY(20deg);
}

The skew() Method

The skew() method skews an element along the X and Y-axis by the given angles

div {
  transform: skew(20deg, 10deg);
}

In the below example the second value is not present so it is considered as 0.
It skews the div by 20 degrees along x-axis.

div {
  transform: skew(20deg);
}

The matrix() Method

• The matrix() method combines all the 2D transform methods into one.
• It has six parameters.
• The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

div {
  transform: matrix(1, 0, 0.5, 1, 150, 0);
}

CSS 3D Transforms

3D Transforms Methods

• rotateX()
• rotateY()
• rotateZ()

The rotateX() Method

• The rotateX() method rotates an element around its X-axis at a given degree:

#myDiv {
  transform: rotateX(150deg);
}

The rotateY() Method

• The rotateY() method rotates an element around its Y-axis at a given degree:

#myDiv {
  transform: rotateY(150deg);
}

The rotateZ() Method

• The rotateZ() method rotates an element around its Z-axis at a given degree:

#myDiv {
  transform: rotateZ(90deg);
}

Sources:-

W3Schools