CSS provides several functions to skew elements, allowing you to transform the shape and appearance of elements on the page.
1. skewX(angle): This function skews an element along the X-axis by the specified angle. The angle is given in degrees (deg) or radians (rad).
Syntax
transform: skewX(angle);
Example
.skewX-45 { transform: skewX(-45deg); }
2. skewY(angle): This function skews an element along the Y-axis by the specified angle.
Syntax
transform: skewY(angle);
Example
.skewY-90 { transform: skewY(-90deg); }
3. skew(x-angle, y-angle): This function skews an element along both the X-axis and the Y-axis. The angles are specified separately for each axis.
Syntax
transform: skew(x-angle, y-angle);
Example
.skew-45-90 { transform: skew(45deg, -90deg); }
skew.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Skew Functions Example</title> <style> .container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-around; } .box { width: 200px; height: 200px; background-color: lightblue; display: flex; align-items: center; justify-content: center; border: 2px solid blue; font-size: 12px; text-align: center; position: relative; /* Ensure text positioning */ font-size: 30px; } .box-details { font-size: 30px; font-weight: bold; margin-top: 5px; } .skew45 { transform: skewX(25deg); } </style> </head> <body> <div class="container"> <div class="box skew45">25deg<div class="box-details">(skew x)</div></div> </div> </body> </html>
No comments:
Post a Comment