CSS Function - skewX()

The CSS function skewX() specifies a transformation that slants an element horizontally on the 2D plane yielding a data type of <transform-function>.

Possible Value

a - Refers to an <angle> , which specifies the angle used to distort the element along the horizontal axis (x-coordinate).

  • This transformation, known as shear mapping or transvection, distorts points within an element by an angle in the horizontal direction.

  • It changes the horizontal position of each point based on the specified angle and distance from the origin, with points farther from the origin being more affected.

Note: skewX(a) is equivalent to skew(a).

Syntax

skewX(a)

CSS skewX() - Basic Example

The following example demonstrates the usage of skewX():

<html>
<head>
<style>
   .skew-demo {
      transform: skewX(30deg);
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      margin-bottom: 20px;
      text-align: center;
   }
   .normal-demo {
      background-color: #f44336;
      color: white;
      padding: 20px;
      text-align: center;
   }
</style>
</head>
<body>
<h2>skewX and normal</h2>
   <div class="skew-demo">This is a skewed div element.</div>
   <div class="normal-demo">This is a normal div element.</div>
</body>
</html>
Advertisements