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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store