CSS3 2D transforms are used to re-change the element structure as translate, rotate, scale, and skew
2D transformation methods:
-
translate()
-
rotate()
-
scale()
-
skewX()
-
skewY()
-
matrix()
Now lets look into how to rotate a div 30 degrees by using rotate() method.
1. The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
Box rotation with 30 degrees angle as shown below
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html> <head> <style> div { width: 300px; height: 100px; background-color: #F15A29; border: 1px solid #fff; } div#rotate_div { transform: rotate(30deg); } </style> </head> <body> <div> This is a original div. </div> <div id="rotate_div"> Div after rotating 30deg. </div> </body> </html> |
The output of the above code will be:
- Box rotation with -40 degrees angle as shown below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html> <head> <style> div { width: 300px; height: 100px; background-color: #F15A29; border: 1px solid #fff; } div#rotate_div { transform: rotate(-40deg); } </style> </head> <body> <div> This is a original div. </div> <div id="rotate_div"> Div after rotating -40deg. </div> </body> </html> |
output:
2. translate() method:
The translate() method moves an element from its current position. This div element can be moved to the right, left, down from its current position depending on the requirement.
Syntax:
transform: translate(40px,100px);
The div will be moved 40px right and 100px down from its original position.
3. scale() method:
The scale() method increases or decreases the size of an element.
Syntax:transform: scale(2,3);
4. The skewX() Method
The skewX() method skews an element along the X-axis by the given angle.
The following example skews the <div> element 15 degrees along the X-axis:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 80px; background-color: #F15A29; border: 1px solid black; } div#skew_div { transform: skewX(15deg); } </style> </head> <body> <div> div element. </div> <div id="skew_div"> This div element is skewed 15 degrees along the X-axis. </div> </body> </html> |
The output will be as shown below.
5.The skewY() Method
The skewY() method skews an element along the Y-axis by the given angle.
The following example skews the <div> element 15 degrees along the Y-axis:
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 80px; background-color: #F15A29; border: 1px solid black; } div#skew_div { transform: skewY(15deg); } </style> </head> <body> <div> div element. </div> <div id="skew_div"> This div element is skewed 15 degrees along the Y-axis. </div> </body> </html> |
The output will be:
6.The skew() Method
The skew() method skews an element along the X and Y-axis by the given angles.
The following example skews the <div> element 20 degrees along the X-axis, and 10 degrees along the Y-axis:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 80px; background-color: #F15A29; border: 1px solid black; } div#skew_div { transform: skew(15deg,20deg); } </style> </head> <body> <div> div element. </div> <div id="skew_div"> This div element is skewed 15degrees along the X-axis and 20degrees along Y-axis. </div> </body> </html> |
The output will be:
7.The matrix() method combines all the 2D transform methods into one.
The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 80px; background-color: #F15A29; border: 1px solid black; } div#skew_div { transform: matrix(1, 0, 0.5, 1, 150, 0); } </style> </head> <body> <div> div element. </div> <div id="skew_div"> This div element after matrix transform. </div> </body> </html> |
The output will be:
Conclusion:
I hope you have learnt all the 2D transformation in our next blog we will be disscussing about 3D transformation. If you have any query do write us at support@acadgild.com.
Leave a Reply