CSS3 2D transforms are used to re-change the element structure as translate, rotate, scale, and skew. You can view our more examples in our GitHub repo https://github.com/somacadgild/Css.git
2D transformation methods:
-
translate()
-
rotate()
-
scale()
-
skewX()
-
skewY()
-
matrix()
Now, lets look into how to rotate a div 30 degrees by using a 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
<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:
<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:
<!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:
<!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:
<!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:
<!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:
8. Let’s see one important effect using Image with text overlay Scale use
<div class="container"> <img src="" alt=""> <div class="textbox"> <p class="text">TEXT</p> </div> </div>
.container { position:relative; overflow:hidden; } .container .textbox { width:200px; height:150px; position:absolute; top:0; left:0; margin-top:-160px; border-radius:5px; background-color: rgba(0,0,0,0.75); -webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75); box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75); } .container:hover .textbox { margin-top:0; } .text { padding-top: 50px; } .textbox { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
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.
Keep visiting our site www.acadgild.com for more updates on Frontend and other technologies.