CSS transform: skewX()

The CSS skewX() function is used to define the transform property to skew an element horizontally (on x-axis). Skewing an element on x-axis, means the element will neither be parallel nor intersect the x-axis, it will be like a slant, as shown in the following snapshot:

For example:

HTML with CSS Code

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

   <h2>skewX(20deg)</h2>
   <div class="b"></div>

   <h2>skewX(45deg)</h2>
   <div class="c"></div>

   <h2>skewX(80deg)</h2>
   <div class="d"></div>

   <h2>skewX(90deg)</h2>
   <div class="e"></div>

   <h2>skewX(100deg)</h2>
   <div class="f"></div>

   <h2>skewX(135deg)</h2>
   <div class="g"></div>

   <h2>skewX(0deg)</h2>
   <div class="h"></div>

   <h2>skewX(-45deg)</h2>
   <div class="i"></div>
   
</body>
</html>

Output

Without skewX()

skewX(20deg)

skewX(45deg)

skewX(80deg)

skewX(90deg)

skewX(100deg)

skewX(135deg)

skewX(0deg)

skewX(-45deg)

CSS skewX() Syntax

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

transform: skewX(val);

The value of val parameter will be any of the following:

deg - Stands for degree. One full circle is equal to 360deg
grad - Stands for gradians. One full circle is equal to 400grad
rad - Stands for Radians. One full circle is equal to 6.2832rad
turn - Stands for turns. One full circle is equal to 1turn

CSS Online Test

« Previous Tutorial Next Tutorial »