CSS skewX and skewY property
The skewX and skewY properties in CSS are part of the transform function family, and they are used to skew (or slant) elements along the X-axis and Y-axis, respectively. Skewing an element means distorting it in such a way that it appears to be leaning or slanting, similar to the effect seen when tilting a rectangle into a parallelogram.
1. skewX()
The skewX() function skews an element along the horizontal X-axis.
Syntax:
transform: skewX(angle);angle: The amount of skew, defined in degrees (deg). Positive values slant the element to the right, while negative values slant it to the left.
Example:
.box { transform: skewX(30deg); }- This code skews the element 30 degrees along the X-axis, making it lean to the right.
2. skewY()
The skewY() function skews an element along the vertical Y-axis.
Syntax:
transform: skewY(angle);angle: The amount of skew, defined in degrees (deg). Positive values slant the element downwards to the right, while negative values slant it upwards to the right.
Example:
.box { transform: skewY(20deg); }- This code skews the element 20 degrees along the Y-axis, making it lean downwards.
Combining skewX() and skewY()
You can combine both skewX() and skewY() to skew an element diagonally along both axes:
.box {
transform: skewX(30deg) skewY(20deg);
}
- This combination skews the element 30 degrees along the X-axis and 20 degrees along the Y-axis, distorting it diagonally.
Practical Example
HTML and CSS Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skew Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 50px;
transition: transform 0.5s ease;
}
.skew-x:hover {
transform: skewX(20deg);
}
.skew-y:hover {
transform: skewY(15deg);
}
.skew-xy:hover {
transform: skewX(20deg) skewY(15deg);
}
</style>
</head>
<body>
<div class="box skew-x">Skew X</div>
<div class="box skew-y">Skew Y</div>
<div class="box skew-xy">Skew X & Y</div>
</body>
</html>
Explanation
Skew X:
- The first box will skew 20 degrees along the X-axis when you hover over it, slanting the element to the right.
Skew Y:
- The second box will skew 15 degrees along the Y-axis when you hover over it, slanting the element downwards.
Skew X & Y:
- The third box will skew 20 degrees along the X-axis and 15 degrees along the Y-axis when you hover over it, creating a diagonal skew.
Visual Representation
- Skewing along the X-axis: Imagine a rectangle where the top remains in place, but the bottom edge is pushed to the right (positive skew) or to the left (negative skew). The shape becomes a parallelogram leaning to one side.
- Skewing along the Y-axis: Imagine a rectangle where the left side remains in place, but the right side is pushed downward (positive skew) or upward (negative skew). Again, the shape becomes a parallelogram, but this time it's leaning vertically.
Important Notes
- Skewing affects the entire element: When you apply a skew transformation, the entire element, including its contents, is skewed. This can distort text and other child elements.
- Combine with other transforms: Skew can be combined with other transformations like
rotate,scale, ortranslateto create complex effects.