Girando las cosas con CSS

La idea que muestran en CSS Tricks es interesante pero, sólo funcionará en Chrome o Safari así que poco nos puede interesar al 95% de los los usuarios que no usamos esos navegadores; sin embargo, basándose en eso, podríamos intentar algo menos espectacular pero que funcione más o menos bien en todos.

Nos olvidamos de algunas cosas y vamos a crear un header "torcido" que se mueva un poco cuando ponemos el cursor encima.

El HTML es simple, en un rectángulo, agregamos dos títulos:

<div id="demoBG">
  <h1><span>header</span></h1>
  <h2><span>dando vueltas y vueltas</span></h2>
</div>

Y ahora, el CSS:

<style>
#demoBG { /* el rectángulo */
  margin: 20px auto;
  width: 600px;
}
#demoBG h1, #demoBG h2 { /* los títulos */
  border-bottom: 10px solid rgba(0, 0, 0, 0.1);
  border-top: 10px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
#demoBG h1 span, #demoBG h2 span { /* los textos */
  display: block;
  position: relative;
}

#demoBG h1 { /* el título superior */
  background: #FFF;
  margin: 0;
  position: relative;
  text-align: center;
  z-index: 200;
  /* lo rotamos en los diferentes navegadores */
  -moz-transform: rotate(-4deg);
  -webkit-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=0.0697564737441253, M21=-0.0697564737441253, M22=0.9975640502598242);
}
#demoBG h1 span { /* el texto en si mismo */
  color: CornflowerBlue;
  font-family: Garamond;
  font-size: 100px;
  line-height: 100px;
  text-transform: uppercase;
}

#demoBG h2 { /* el título inferior */
  background: DarkRed;
  margin: 0;
  z-index: 100;
  /* lo rotamos en los diferentes navegadores */
  -moz-transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=-0.03489949670250097, M21=0.03489949670250097, M22=0.9993908270190958); 
}
#demoBG h2 span { /* el texto en si mismo */
  color: Tomato;
  font-family: Comic Sans MS;
  font-size: 50px;
  line-height: 90px;
  text-align: center;
}

#demoBG:hover > h1 { /* efecto hover sobre el título superior */
  -moz-transform: rotate(4deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9975640502598242, M12=-0.0697564737441253, M21=0.0697564737441253, M22=0.9975640502598242); 
}
#demoBG:hover > h2 { /* efecto hover sobre el título inferior */
  -moz-transform: rotate(-2deg);
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9993908270190958, M12=0.03489949670250097, M21=-0.03489949670250097, M22=0.9993908270190958); 
}
</style>

header

dando vueltas y vueltas