skewY() CSS Function

Description

The CSS skewY() function is used to skew elements in a two-dimensional space along the y-axis. It takes a single argument, which is the angle of the skew. The angle can be represented in degrees, gradians, radians, or turns.

When an element is skewed along the y-axis, its top and bottom edges are translated, while its left and right edges remain in place. This creates a parallelogram shape. The angle of the skew determines how much the top and bottom edges are translated. A positive angle will skew the element to the right, while a negative angle will skew it to the left.

The skewY() function can be used to create a variety of visual effects, such as:

• Making text look slanted or tilted
• Creating parallelogram-shaped elements
• Adding dynamism to animations

Here is an example of how to use the skewY() function:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: skewY(10deg);
}

This CSS will create a red square that is skewed to the right by 10 degrees.

The skewY() function can be combined with other transformation functions, such as rotate() and scale(), to create more complex effects.

Here is an example of how to use the skewY() function in conjunction with the rotate() function to create a diamond shape:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: skewY(45deg) rotate(45deg);
}

This CSS will create a red diamond shape.

Syntax

skewY() = transform: skewY(<angle>);

Values

• <angle>The angle is taken as the value. A positive value tilts to the left, a negative value to the right. A value of 0 leaves the element without distortion.

Example

<img class="skewY" src="images/nature.jpg" alt="Nature Image">

.skewY {

    transform-origin: top left;

    transform: skewY(10deg);

}

Browser Support

The following table will show you the current browser support for the CSS skewY() function.

Desktop
12	1	3.5	10.1	3.5

Tablets / Mobile
18	4	11	3.2	1	2

Last updated by CSSPortal on: 7th October 2023