CSS Function - skewY()

Quiz

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>

Print Page