Skip to content
Related Articles

Related Articles

CSS | skew() Function

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Aug, 2019
View Discussion
Improve Article
Save Article

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 )

or

skew( 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:




<!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
        alt="GeeksforGeeks logo"
</body
  
</html>    

Output:

Example 2:




<!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
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!