The skewY() method skews an element along the Y-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 skewY method is:
transform: skewY(30deg); <---OR---> transform: skewY(-40deg);
In the following demonstration, we show a variety of degrees for the skewY:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#Div10 { -ms-transform: skewY(10deg); /* IE 9 */ -webkit-transform: skewY(10deg); /* Safari */ transform: skewY(10deg); } div#Div-20 { -ms-transform: skewY(-20deg); /* IE 9 */ -webkit-transform: skewY(-20deg); /* Safari */ transform: skewY(-20deg); } div#Div30{ -ms-transform: skewY(30deg); /* IE 9 */ -webkit-transform: skewY(30deg); /* Safari */ transform: skewY(30deg); } div#Div-40 { -ms-transform: skewY(-40deg); /* IE 9 */ -webkit-transform: skewY(-40deg); /* Safari */ transform: skewY(-40deg); } div#Div50 { -ms-transform: skewY(50deg); /* IE 9 */ -webkit-transform: skewY(50deg); /* Safari */ transform: skewY(50deg); } </style> <body> <div> This a normal div element, unskewed. </div> <h3>Using a positive value:</h3> <br /> <div id="Div10"> This div element is skewed 10 degrees along the Y-axis. </div> <br /> <div id="Div30"> This div element is skewed 30 degrees along the Y-axis. </div> <br /> <div id="Div50"> This div element is skewed 50 degrees along the Y-axis. </div> <br /><br /><br /><br /><br /><br /><br /><br /><br /> <h3>Using a negative value:</h3> <br /> <div id="Div-20"> This div element is skewed -20 degrees along the Y-axis. </div> <br /> <div id="Div-40"> This div element is skewed -40 degrees along the Y-axis. </div><br /><br /><br /><br /><br /><br /> </body> |
This a normal div element, unskewed.
Using a positive value:
This div element is skewed 10 degrees along the Y-axis.
This div element is skewed 30 degrees along the Y-axis.
This div element is skewed 50 degrees along the Y-axis.
Using a negative value:
This div element is skewed -20 degrees along the Y-axis.
This div element is skewed -40 degrees along the Y-axis.
|
The Y-axis is the vertical line. If you use a negative value, the skew will be in the other direction, the right side being higher. Note: The skewed elements would have gone beyond the table cell borders if I had not used the <br /> elements.
