Page not found 404 CSS3

The Page Not Found, commonly called 404, should provide directive and be friendly so the user that lands on it does not close the browser or simply go away from your site.

Using the rotate CSS3 property, you can make simulate a visual broken page without using images

#menu { -webkit-transform: rotate(-1.8deg); -moz-transform: rotate(-1.8deg); }
#tags { -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); }
#logo { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg);  }
#mainContent { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); }

#error404 .icon404 { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); }
#error404 .text { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); }
#error404 .text h1 { -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); }
#error404 .text h2 { -webkit-transform: rotate(42deg); -moz-transform: rotate(42deg); margin-top: 20px; }
#error404 .text h2 span { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); }
#error404 .text p { -webkit-transform: rotate(26deg); -moz-transform: rotate(26deg); }

.footerTop { -webkit-transform: rotate(-9deg); -moz-transform: rotate(-9deg); margin-top: 80px;}

#footer { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg);  }
#footer #links { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
#footer #feeds { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); }
#footer #social { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); }
#footer #newsletter { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); }
#footer #copyright { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); }
#footer #copyright p { -webkit-transform: rotate(-17deg); -moz-transform: rotate(-17deg); }

Demo:

You can view the demo of this code at our actual 404 page.