Cómo rotar texto con CSS

Hace tiempo, si queríamos rotar uno o varios textos en nuestra web debíamos crear una imagen con el texto en su interior. Este paso lo teníamos que repetir X veces en el caso de tener varios. Gracias a CSS nos ahorramos esta tediosa tarea, ya que creando una clase podremos modificar todos los textos que queramos. Para ello, debemos incluir el siguiente código en la página html o incluirlo en un fichero css externo (quitándole las etiquetas style):

<style type="text/css">
.rotar_texto {
  /* Safari */
  -webkit-transform: rotate(270deg);
  /* Firefox */
  -moz-transform: rotate(270deg);
  /* IE */
  -ms-transform: rotate(270deg);
  /* Opera */
  -o-transform: rotate(270deg);
  /* Internet Explorer */
  filter: progidXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

Por último, tan solo debemos incluir el texto que queremos rotar dentro de algún contenedor como por ejemplo un span o un div y a éste, añadirle la clase que hemos definido anteriormente:

<span class="rotar_texto">
  Texto de prueba
</span>

css

banner