CSS 2D Transforms - GeeksforGeeks

08 Nov, 2021
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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"             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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"             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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"             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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"             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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"             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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"             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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"             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="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"             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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
bhaskargeeksforgeeks
CSS-Advanced
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Build a Survey Form using HTML and CSS
Primer CSS Flexbox Flex Direction
How to Upload Image into Database and Display it using PHP ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?