HTML CSS examples for CSS Animation:Skew
CSS3 Transform Skew
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from www .j a v a2 s . c o m--> background:linear-gradient(46deg, Chartreuse 46px, transparent 46px)65px 65px, linear-gradient(46deg, yellow 46px, transparent 46px,transparent 92px, blue 92px, pink 136px, transparent 136px), linear-gradient(-46deg, OrangeRed 24px, transparent 24px, transparent 69px,grey 69px,BlueViolet 114px,transparent 114px,transparent 159px,Chartreuse 159px); background-color:yellow; background-size:129px 129px; } #box { width:201px; height:171px; margin-top:31px; background-color:blue; transform:skewY(11deg); position:relative; z-index:2; } #box:before { content:""; display:block; width:201px; height:81px; position:absolute; bottom:-41px; left:0; background-color:pink; transform:skewY(-21deg); z-index:-2; } #box:hover { -webkit-transform:skewY(11deg) rotate(-181deg) scale(0.9); } </style> </head> <body> <div id="box"></div> </body> </html>