CSS 2D Transforms:-

CSS transforms using for to move, rotate, scale, and skew elements in CSS.

Code

2D Transforms Methods in css:-

CSS transform property you can using this methods in 2D transformation in CSS:-

translate()

rotate()

scaleX()

scaleY()

scale()

skewX()

skewY()

skew()

matrix()

translate() Method:-

The translate() method is moves the element from its current position to another,

<style> 
div {
  width: 300px;
  height: 100px;
  text-align:center;
  background-color: red;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  transform: translate(50px,100px); /* Standard syntax */
}
</style>


<h1>The translate() Method code family</h1>
<p>Code family</p>

<div>
we are code family
</div>

rotate() Method:-

The rotate() method rotates the elements clockwise or counter-clockwise in css, according to given degree in css.

<style>
div {
  width: 300px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
}

#code {
  -ms-transform: rotate(20deg); 
  transform: rotate(20deg); 
}
</style>


<h1>Code family</h1>
<p>code family</p>

<div>
Code family
</div>

<div id="code">
 we are code family
</div>

scale() Method:-

The scale() method increases or decreases the sizing of an element according to the parameters given for the width and height in HTML page.

<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: blue;
  border: 1px solid black;
  -ms-transform: scale(2,3); /* IE 9 */
  transform: scale(2,3); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The scale() Method</h1>
<p>Code Family</p>

<div>
we are code family
</div>

scaleX() Method:-

scaleX() method increases or decreases the width of an element according to given value.

<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  color:white;
  background-color: skyblue;
  border: 1px solid black;
  -ms-transform: scaleX(2); /* IE 9 */
  transform: scaleX(2); /* Standard syntax */
}
</style>

<h1>Code family</h1>
<p>we are Code family</p>

<div>
we are Code family
</div>

scaleY() Method:-

scaleY() method increases or decreases the height of an element in CSS

<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  color:white;
  background-color: skyblue;
  border: 1px solid black;
  -ms-transform: scaleY(3); /* IE 9 */
  transform: scaleY(3); /* Standard syntax */
}
</style>

<h1>Code family</h1>
<p>we are Code family</p>

<div>
we are Code family
</div>

skewX() Method:-

<style>
div {
  width: 300px;
  height: 100px;
  background-color: red;
  border: 1px solid black;
}

#code {
  -ms-transform: skewX(20deg); /* IE 9 */
  transform: skewX(20deg); /* Standard syntax */
}
</style>

<h1>Code family</h1>
<p>code Family</p>

<div>
we are Code family.
</div>

<div id="code">
we are Code family.
</div>

skewY() Method:-

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

<style>
div {
  width: 300px;
  height: 100px;
  background-color: blue;
  border: 1px solid black;
}

#code {
  -ms-transform: skewY(20deg); /* IE 9 */
  transform: skewY(20deg); /* Standard syntax */
}
</style>


<h1>code family</h1>
<p>we are code family.</p>

<div>
code family.
</div>

<div id="code">
code family
</div>

skew() Method:-

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

<style>
div {
  width: 300px;
  height: 100px;
  background-color: blue;
  border: 1px solid black;
}

#code {
  -ms-transform: skew(20deg,10deg); /* IE 9 */
  transform: skew(20deg,10deg); /* Standard syntax */
}
</style>


<h1>Code family</h1>
<p>we are Code family.</p>

<div>
we are Code family
</div>

<div id="code">
we are Code family
</div>

matrix() Method:-

matrix() method combines all the 2D transform methods into one in CSS. So This is matrix() Method.

<style>
div {
  width: 300px;
  height: 100px;
  background-color: blue;
  border: 1px solid black;
}

#code1 {
  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
  transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}

#code2 {
  -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
  transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}
</style>

<h1>Code Family</h1>
<p>we are Code Family.</p>

<div>
we are Code Family.
</div>

<div id="code1">
we are Code Family
</div>

<div id="code2">
we are Code Family
</div>

What is 2D Transforms in css