CSS Function - skew()

The CSS function skew() specifies a transformation that slants an element on the 2D plane, resulting in a data type of <transform-function>.

Possible Values

  • ax - Represents an <angle> that specifies the angle used to skew the element along the x-axis.

  • ay - Represents an <angle> that specifies the angle used to distort the element along the y-axis. If it is not specified, it defaults to 0 and causes a purely horizontal skew.

  • This transformation, known as shear mapping or transvection, skews points within an element both horizontally and vertically.

  • It simulates dragging each corner of the element by a specified angle. The coordinates of the points are adjusted based on the specified angle and distance from the origin, with the more distant points being affected more.

Syntax

The skew() function may have one or two values to determine the extent of skew in the horizontal and vertical directions. If only one value is specified, it applies to the x-axis, while the y-axis is unaffected.

skew(ax)
skew(ax, ay)

CSS skew() - X-axis Only

The following example demonstrates the usage of skew() to skew on one axis only:

<html>
<head>
<style>
   .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 50px;
   }
   .skew-demo {
      transform: skew(20deg);
      background-color: #FFC107;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
   }
      .normal-demo {
      background-color: #2196F3;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="skew-demo">This is div element showing Skew</div>
      <div class="normal-demo">This is a div element showing Normal</div>
   </div>
</body>
</html>

CSS skew() - Both Axes

The following example demonstrates the usage of skew() to skew on both the axis

<html>
<head>
<style>
   .container {
   width: 200px;
   height: 200px;
   margin-top: 40px;
   margin-left: 40px;
   background-color: #DAF7A6;
   transform: skew(20deg, 10deg);
   }
</style>
</head>
<body>
   <div class="container">
   <p>This is an example of skewing on both axes.</p>
</div>
</body>
</html>
Advertisements