CSS skewX() Function
Example
Use skewX() to skew several <div> elements along the x-axis, by a given angle:
#myDiv1 {
transform: skewX(15deg);
}
#myDiv2 {
transform: skewX(30deg);
}
#myDiv3 {
transform: skewX(-25deg);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS skewX() function is used to skew an
element along the x-axis, by the given angle.
The skewX() function is used within the
transform property.
Tip: skewX(a) is equal to skew(ax)!
| Version: | CSS Transforms Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| skewX() | 1 | 12 | 3.5 | 3.1 | 10.5 |
CSS Syntax
skewX(a)
| Value | Description |
|---|---|
| a | Required. An angle. Specifies the skew along the x-axis |
More Examples
Example
Use skewX() to skew images along the x-axis, by a given angle:
#img1 {
transform: skewX(25deg);
}
#img2 {
transform:
skewX(-25deg);
}
#img3 {
transform: skewX(10deg);
}
Try it Yourself »
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS skew() function.
CSS reference: CSS skewY() function.
CSS tutorial: CSS 2D transforms.
