skew()

by

The skew() CSS function is used to slant an element along the X-axis or Y-axis. It takes one or two parameters, specifying the angle of skew in degrees.

Syntax

element {
  transform: skew(angleX, angleY);
}

Parameters

  • angleX: The angle of skew along the X-axis.
  • angleY: The angle of skew along the Y-axis.

Examples

  • Skewing along the X-axis
.skewed-x {
    transform: skewX(20deg);
}

This will slant the element 20 degrees to the right.

  • Skewing along the Y-axis
.skewed-y {
    transform: skewY(-15deg);
}

This will slant the element 15 degrees upwards.

  • Skewing along both axes
.skewed-xy {
    transform: skew(20deg, -15deg);
}

This will slant the element 20 degrees to the right and 15 degrees upwards.

Combining with Other Transforms

You can combine skew() with other transform functions like rotate(), scale(), and translate() to create more complex effects. For example:

.complex-transform {
  transform: rotate(45deg) scale(0.8) skew(20deg, -10deg);
}

Key Points

  • The skew() function can be used to create interesting visual effects.
  • Experiment with different angles to achieve desired results.
  • Combine skew() with other transforms to create more complex effects.
  • Consider the overall layout and design when using skew(), as it can sometimes make text harder to read.