Categorías: Tutoriales

Rotar un texto vía CSS

Probablemente en alguna ocasión hayáis necesitado rotar texto en algún sitio web. La opción que os traigo hoy para este problema, utiliza CSS, por lo que se integra a la perfección en cualquier tipo de sitio y es perfectamente compatible con los navegadores más populares de la actualidad: Mozilla Firefox (y familia Gecko), Google Chrome/Chromium (y familia WebKit) e incluso Internet Explorer (aunque de una manera menos directa).

Las reglas CSS a incluir son las siguientes (rotación de -90º o 270º):
-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

El tip original ha aparecido en unos de mi blog favoritos de diseño web, Gloobs.

F. Javier Carazo Gil

Cofundador de CODECTION, empresa especializada en WordPress, autor de un libro sobre WordPress (el primero en español) y multitud de artículos (en medios físicos y virtuales) sobre el tema. Participa en la comunidad WordPress de forma activa siendo parte del equipo organizador de la WordPress Meetup de Córdoba, dando charlas en diferentes WordCamp y siendo autor y coautor de multitud de plugins libres y premium para WordPress de gran éxito.