##CSS3 transform skew
The skew function The skew function is used to lean the element in one direction or another. The skew function parameters expect angles to be leaned, and values such as 45deg are valid.
We should use skewX() and skewY() only in order to skew around the respective axis by the angle passed as the parameter.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>CSS3 transform skew</title> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <h2>transform: skewX(45deg)</h2> | |
| <div class="transformSix"> | |
| <h2>.transformSix</h2> | |
| </div> | |
| <h2>transform: skewY(45deg)</h2> | |
| <div class="transformSeven"> | |
| <h2>.transformSeven</h2> | |
| </div> | |
| </body> | |
| </html> |
| .transformSix { | |
| display : block; | |
| margin : 25px; | |
| width : 100px; | |
| height : 50px; | |
| border : 1px solid blue; | |
| background-color : #FF0099; | |
| } | |
| .transformSix:hover { | |
| -webkit-transform : skewX(45deg); | |
| transform : skewX(45deg); | |
| } | |
| .transformSeven { | |
| margin : 25px; | |
| display : block; | |
| width : 100px; | |
| height : 50px; | |
| border : 1px solid blue; | |
| background-color : #FF0099; | |
| } | |
| .transformSeven:hover { | |
| -webkit-transform : skewY(45deg); | |
| transform : skewY(45deg); | |
| } |