The skewX() method skews an element along the X-axis by the given angle. A positive value skews the element in one direction, while a negative value will skew it to the other direction. The syntax for the skewX method is:
transform: skewX(30deg); <---OR---> transform: skewX(-40deg);
In the following demonstration, we show a variety of degrees for the skewX:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#Div10 { -ms-transform: skewX(10deg); /* IE 9 */ -webkit-transform: skewX(10deg); /* Safari */ transform: skewX(10deg); } div#Div-20 { -ms-transform: skewX(-20deg); /* IE 9 */ -webkit-transform: skewX(-20deg); /* Safari */ transform: skewX(-20deg); } div#Div30{ -ms-transform: skewX(30deg); /* IE 9 */ -webkit-transform: skewX(30deg); /* Safari */ transform: skewX(30deg); } div#Div-40 { -ms-transform: skewX(-40deg); /* IE 9 */ -webkit-transform: skewX(-40deg); /* Safari */ transform: skewX(-40deg); } div#Div50 { -ms-transform: skewX(50deg); /* IE 9 */ -webkit-transform: skewX(50deg); /* Safari */ transform: skewX(50deg); } </style> <body> <div> This a normal div element, unskewed. </div> <h3>Using a positive value:</h3> <div id="Div10"> This div element is skewed 10 degrees along the X-axis. </div> <br /> <div id="Div30"> This div element is skewed 30 degrees along the X-axis. </div> <br /> <div id="Div50"> This div element is skewed 50 degrees along the X-axis. </div> <h3>Using a negative value:</h3> <div id="Div-20"> This div element is skewed -20 degrees along the X-axis. </div> <br /> <div id="Div-40"> This div element is skewed -40 degrees along the X-axis. </div> </body> |
This a normal div element, unskewed.
Using a positive value:
This div element is skewed 10 degrees along the X-axis.
This div element is skewed 30 degrees along the X-axis.
This div element is skewed 50 degrees along the X-axis.
Using a negative value:
This div element is skewed -20 degrees along the X-axis.
This div element is skewed -40 degrees along the X-axis.
|
The X-axis is the horizontal line.
