CSS 2D Transforms
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 36.0
- Microsoft Edge 12.0
- Internet Explorer 10.0
- Firefox 16.0
- Opera 23.0
- Safari 9.0
Note: Internet Explorer does not support the global values initial and unset.
.png)
