CSS 2D Transforms
Last Updated :
21 Jul, 2023
A transformation in CSS is used to modify an element by its shape, size and position. It transforms the elements along the X-axis and Y-axis. There are 6 main types of transformation which are listed below:
- translate()
- rotate()
- scale()
- skewX()
- skewY()
- matrix()
We will implement all these functions & will understand their concepts through the examples.
translate() Method: The translate() method is used to move the element from its actual position along the X-axis and Y-axis.
Example: This example describes the CSS translate() method to modify the position of an element from its actual position.
HTML
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
.geeks {
font-size: 25px;
margin: 20px 0;
margin-left: 100px;
}
img {
border: 1px solid black;
transition-duration: 2s;
-webkit-transition-duration: 2s;
}
img:hover {
transform: translate(100px, 100px);
/* prefix for IE 9 */
-ms-transform: translate(100px, 100px);
/* prefix for Safari and Chrome */
-webkit-transform: translate(100px, 100px);
}
</ style >
</ head >
< body >
< div class = "geeks" >Translate() Method</ div >
< img src =
alt = "GFG" />
</ body >
</ html >
|
Output:
rotate() Method: The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. The degree is given in the parenthesis.
Example: This example describes the CSS rotate() method to rotate an element clockwise or counterclockwise.
HTML
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >Rotation() Method</ div >
< img src =
alt = "GFG" />
</ body >
</ html >
|
Output:
Counter-clockwise rotation: Use negative values to rotate the element counter clockwise.
Example: This example describes the CSS Counter-clock rotate() method to rotate an element clockwise using the negative values.
HTML
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >Counter-clock Rotate() Method</ div >
< img src =
alt = "GFG" />
</ body >
</ html >
|
Output:
scale() Method: It is used to increase or decrease the size of an element according to the parameter given for the width and height.
Example: This example describes the CSS scale() method to resize the element according to their width & height.
HTML
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: scale(1, 2);
/* Safari */
-webkit-transform: scale(1, 1);
/* Standard syntax */
transform: scale(1, 2);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >Scale() Method</ div >
< img src =
alt = "GFG" />
</ body >
</ html >
|
Output:
Note: The size of elements can be decreased using half of their width and height.
skewX() Method: This method is used to skew an element in the given angle along the X-axis.
Example: This example describes the CSS skewX() method to skew the element in X-axis.
HTML
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >skewX() Method</ div >
< img src =
alt = "GFG" />
</ body >
</ html >
|
Output:
skewY() Method: This method is used to skew an element in the given angle along the Y-axis.
Example: This example describes the CSS skewY() method to skew the element in Y-axis.
HTML
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >skewY() Method</ div >
< img src =
alt = "GFG" />
</ body >
</ html >
|
Output:
skew() Method: This method skews an element in the given angle along the X-axis and the Y-axis. The following example skews the element 20 degrees along the X-axis and 10 degrees along the Y-axis.
Example: This example describes the CSS skew() method to skew an element in the given angle along the X-axis and the Y-axis.
HTML
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: skew(20deg, 10deg);
/* Safari */
-webkit-transform: skew(20deg, 10deg);
/* Standard syntax */
transform: skew(20deg, 10deg);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >skew() Method</ div >
< img src =
alt = "GFG" />
</ body >
</ html >
|
Output:
matrix() Method: This method combines all the 2D transform property into a single property. The matrix transform property accepts six parameters as matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ).
Example: This example describes the CSS matrix() method to combine all the 2D transform properties into a single property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >2D Transform</ title >
< style >
img {
border: 1px solid black;
}
img:hover {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
.geeks {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</ style >
</ head >
< body >
< div class = "geeks" >matrix() Method</ div >
< img src =
alt = "GFG" />
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Note: Internet Explorer does not support the global values initial and unset.
Share your thoughts in the comments
Please Login to comment...