/    /  CSS 2D Transforms

CSS 2D Transforms

 

The CSS 2D transforms are provide to re-change the structure of the element as translate, rotate, scale and skew, width, height, etc.

 

List of 2D transforms methods:

 

  • translate(x,y): Transform the element along X-axis and Y-axis.
  • translateX(n): Transform the element along X-axis.
  • translateY(n): Transform the element along Y-axis.
  • rotate(): Rotate the element on the basis of an angle.
  • scale(x,y): Change the width and height of an element.
  • scaleX(n): Change the width of an element.
  • scaleY(n): Change the height of an element.
  • skewX(): Skew transforms along with X-axis.
  • skewY(): Skew transforms along with Y-axis.
  • matrix(): It specifies matrix transforms.

 

The translate() method:

 

 <!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
  -ms-transform: translate(100px,80px); /* IE 9 */
  -webkit-transform: translate(100px,80px); /* Safari */
  transform: translate(100px,80px); /* Standard syntax */
color:white;
}
</style>
</head>
<body>
<div>
This div element is translated 50 pixels right, and 100 pixels down from its current position by using translate () method.
</div>
</body>
</html>

 

OUTPUT:

 

CSS 2D Transforms 

 

The rotate() method:

 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: lightpink;
  border: 1px solid black;
}
div#myDiv {
  -ms-transform: rotate(30deg); /* IE 9 */
  -webkit-transform: rotate(30deg); /* Safari */
  transform: rotate(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This a normal div element.
</div>
<div id="myDiv">
This is the 30 degree clockwise rotated div element by using rotate() method. 
</div>
</body>
</html>

 

OUTPUT:

 

CSS 2D Transforms

 

The scale() method:

 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: lightpink;
  border: 1px solid black;
  border: 1px solid black;
  -ms-transform: scale(2.5,2); /* IE 9 */
  -webkit-transform: scale(2.5,2); /* Safari */
  transform: scale(2.5,2); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This div element is scaled 2.5 times of its original width, and 2 times of its original height.
</div>
</body>
</html>

 

OUTPUT:

 

CSS 2D Transforms