The skew() method skews an element along the X and Y-axis by the given angles. If the second parameter is not specified, it has a zero value. The syntax for the skew method is:
transform: skew(20deg, 10deg); <---OR---> transform: skew(-20deg, -10deg);
In this example, we show the skew method with both values and then with only one value:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; } div#one { -ms-transform: skew(20deg); /* IE 9 */ -webkit-transform: skew(20deg); /* Safari */ transform: skew(20deg); } div#two { -ms-transform: skew(20deg, 10deg); /* IE 9 */ -webkit-transform: skew(20deg, 10deg); /* Safari */ transform: skew(20deg, 10deg); } </style> <body>> <div> This a normal div element. </div> <br /><br /> <div id="two"> <p><b>Skew(20deg, 10deg):</b> <br />This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis. </div> <br /><br /> <div id="one"> <p><b>Skew(20deg):</b> <br />This div element is skewed 20 degrees along the X-axis. There is no skewing on the Y-axis because the value is 0. </div> </body> |
This a normal div element.
Skew(20deg, 10deg):
Skew(20deg):
|
