Aplicar Desnivel a un Texto u Elemento HTML

Con este truco, podremos aplicar un efecto de desnivel, o giro a un elemento HTML cualquiera usando CSS.

Se ha tomado la previsión de hacer que esto funcione en la mayoría de navegadores modernos que cumplen los estándares.

Paso 1 — Crear el CSS de la Rotación
<style type="text/css">
.rotacion_1_grado {
	-webkit-transform: rotate(-3deg);  /*Para Chrome*/
	-moz-transform: rotate(-3deg);     /*Para Firefox*/
	-ms-transform: rotate(-3deg);      /*Para Internet Explorer*/
	-o-transform: rotate(-3deg);       /*Para Opera*/
}
</style>


Paso 2 — Aplicar a un Elemento CSS (Ej., un DIV)
<div class="rotacion_1_grado">
<h1><code><b>ATENCIÓN:</b></b> Este es un DIV con texto rotado</h1>
<p>Simplemente utilizamos el siguiente estilo CSS:</p>

<pre>
.rotacion_1_grado {
	-webkit-transform: rotate(-3deg);  /*Para Chrome*/
	-moz-transform: rotate(-3deg);     /*Para Firefox*/
	-ms-transform: rotate(-3deg);      /*Para Internet Explorer*/
	-o-transform: rotate(-3deg);       /*Para Opera*/
}
</pre>

<p>A continuación se muestra el efecto en el navegador.</p>
</div>




ATENCIÓN: Este es un DIV con texto rotado

Simplemente utilizamos el siguiente estilo CSS:

.rotacion_1_grado {
	-webkit-transform: rotate(-3deg);  /*Para Chrome*/
	-moz-transform: rotate(-3deg);     /*Para Firefox*/
	-ms-transform: rotate(-3deg);      /*Para Internet Explorer*/
	-o-transform: rotate(-3deg);       /*Para Opera*/
}

A continuación se muestra el efecto en el navegador.

Para este ejemplo usamos un DIV con 3 clases aplicadas simultáneamente: rotacion_1_grado, color_fondo_div y efecto_caja (nótese cómo cada nombre de la clase CSS simplemente se separa por un espacio en blanco):

______________________________________
<div class="rotacion_1_grado color_fondo_div efecto_caja">
</div>
______________________________________

Y la nueva hoja de estilo:
_________________________________
<style type="text/css">
 .rotacion_1_grado {
	-webkit-transform: rotate(-3deg);  /*Para Chrome*/
	-moz-transform: rotate(-3deg);     /*Para Firefox*/
	-ms-transform: rotate(-3deg);      /*Para Internet Explorer*/
	-o-transform: rotate(-3deg);       /*Para Opera*/
 }

 div.color_fondo_div{
         background: #fff1f1;
 }


 .efecto_caja{
	padding: 0px 4px 2px 4px;
	box-shadow: 4px 4px 5px 6px #00000f;
         margin-bottom:18px;
	font-size: 0.9em;
}
</style>