CSS Function - skewY()

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

  • This transformation, called shear mapping or transvection, distorts points within an element vertically by an angle.

  • It adjusts the vertical position of each point based on the specified angle and distance from the origin, with greater effects on points farther from the origin.

Syntax

skewY(a)

Possible Value

a - Is a <angle> value indicating the angle used to distort the element along the vertical axis (y-coordinate).

CSS skewY() - Basic Example

The following example demonstrates the usage of skewY():

<html>
<head>
<style>
   .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
   }
   .skewY-demo {
      transform: skewY(20deg);
      background-color: #87CEEB;
      padding: 20px;
      margin-bottom: 20px;
   }
      .normal-demo {
      background-color: #FFC300 ;
      padding: 20px;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="skewY-demo">
         <h2>SkewY</h2>
         <p>This text is skewed at a 20 degree angle.</p>
      </div>
      <div class="normal-demo">
         <h2>Normal</h2>
         <p>This text is not skewed.</p>
      </div>
   </div>
</body>
</html>
Advertisements