CSS transform: skew()

The CSS skew() function is used to define the transform property, to skew an element both vertically and horizontally. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .b{transform: skew(20deg, 0deg);}
      .c{transform: skew(45deg, 0deg);}
      .d{transform: skew(80deg, 0deg);}
      .e{transform: skew(0deg, 20deg);}
      .f{transform: skew(0deg, 45deg);}
      .g{transform: skew(45deg, 20deg);}
      .h{transform: skew(80deg, 24deg);}
      .i{transform: skew(80deg, 45deg);}
   </style>
</head>
<body>
   
   <h2>Without skew()</h2>
   <div class="a"></div>

   <h2>skew(20deg, 0deg)</h2>
   <div class="b"></div>

   <h2>skew(45deg, 0deg)</h2>
   <div class="c"></div>

   <h2>skew(80deg, 0deg)</h2>
   <div class="d"></div>

   <h2>skew(0deg, 20deg)</h2>
   <div class="e"></div>

   <h2>skew(0deg, 45deg)</h2>
   <div class="f"></div>

   <h2>skew(45deg, 20deg)</h2>
   <div class="g"></div>

   <h2>skew(80deg, 24deg)</h2>
   <div class="h"></div>

   <h2>skew(80deg, 45deg)</h2>
   <div class="i"></div>
   
</body>
</html>

Output

Without skew()

skew(20deg, 0deg)

skew(45deg, 0deg)

skew(80deg, 0deg)

skew(0deg, 20deg)

skew(0deg, 45deg)

skew(45deg, 20deg)

skew(80deg, 24deg)

skew(80deg, 45deg)

CSS skew() Syntax

The syntax of skew() function in CSS, is:

transform: skew(x, y);

The x parameter refers to skewX(), whereas y parameter refers to skewY(). Therefore the general form of skew() function can also be written as.

transform: skew(skewX(), skewY());

CSS skew() with Single Value

In case, if we provide only one value to skew() function, then the value will get apply to the skewX() whereas the value of skewY() becomes 0. Therefore, skew(20deg) is equal to skew(20deg 0). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .a{transform: skew(20deg);}
      .b{transform: skew(20deg, 20deg);}
   </style>
</head>
<body>
   
   <h2>skew(20deg)</h2>
   <div class="a"></div>

   <h2>skew(20deg, 20deg)</h2>
   <div class="b"></div>
   
</body>
</html>

Output

skew(20deg)

skew(20deg, 20deg)

CSS Online Test

« Previous Tutorial Next Tutorial »