skew() CSS Function

The skew() CSS function is used to distort an element along its X and Y axes, creating a slanted or skewed effect. Unlike rotation, which spins an element around a fixed point, skew() stretches the element in a way that angles its sides without altering its overall position in the layout. This function is often applied via the transform property.

You can provide different angles for the X and Y axes, allowing for horizontal, vertical, or diagonal skewing. If only one value is specified, the other axis defaults to 0°, meaning no skew. Positive values tilt the element in one direction, while negative values tilt it in the opposite direction.

Using skew() is particularly useful for creating dynamic UI elements, buttons, banners, or backgrounds that appear more visually engaging. For example, combining skew() with transition can produce smooth hover effects where the element gradually slants when interacted with.

Example:

<div class="skew-box">Skewed Box</div>

.skew-box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skew(20deg, 10deg);
}

Tips and notes:

• skew() affects the visual appearance of an element but does not change its layout dimensions for other elements.
• It works well with transform-origin to control the pivot point of the skew.
• Can be combined with other transform functions such as rotate() or scale() for more complex effects.