CSS skew() Function Last Updated : 30 Aug, 2024 Comments Improve Suggest changes Like Article Like Report The skew() function is an inbuilt function which is used to transform an element in the 2D plane. Skew an element means to pick a point and push or pull it in different directions. Syntax:skew( ax )orskew( ax, ay )Parameters:ax: This parameter holds the angle representing the horizontal axis to distort an element.ay: This parameter holds the angle representing the vertical axis to distort an element. If it is not defined then it takes the default value zero. It means completely skew in x direction.Below examples illustrate the skew() function in CSS: Example 1: html <!DOCTYPE html> <html> <head> <title>CSS skew() function</title> <style> body { text-align:center; } h1 { color:green; } .skew_image { transform-origin: top left; transform: skew(30deg, 0); } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>CSS skew() function</h2> <img class="skew_image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GeeksforGeeks logo"> </body> </html> Output: Example 2: html <!DOCTYPE html> <html> <head> <title>CSS skew() function</title> <style> body { text-align:center; } h1 { color:green; } .GFG { font-size:35px; font-weight:bold; color:green; transform: skew(45deg); } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>CSS skew() function</h2> <div class="GFG">Welcome to GeeksforGeeks</div> </body> </html> Output: Supported Browsers: The browsers supported by skew() function are listed below:Google Chrome 1Edge 12Internet Explorer 9Firefox 3.5Safari 3.1Opera 10.5 Comment More infoAdvertise with us J jit_t Follow Improve Article Tags : Web Technologies CSS CSS-Functions Explore CSS Tutorial 7 min read CSS Introduction 3 min read CSS Syntax 2 min read CSS Selectors 7 min read CSS Comments 2 min read CSS Colors 5 min read CSS Borders 5 min read CSS Margins 4 min read CSS Height and Width 4 min read CSS Outline 4 min read Like