Rota texto usando sólo CSS

This post was published 9 years ago. It may be exremely outdated.

Vía Anieto2k descubro un método muy sencillo para rotar texto usando CSS. Básicamente debemos usar las propiedades “-webkit-transform“, “-moz-transform“, “filter: progid:DXImageTransform.Microsoft.BasicImage()” para Webkit (y Safari), Firefox 3.5 (o posterior) e Internet Explorer, respectivamente.

Lamentablemente no son propiedades que forman parte del estándar de CSS 2, así que éste método sólo funcionará en navegadores que usen Webkit (como Safari o Google Chrome), Firefox 3.5 e Internet Explorer.

Finalmente el código que usaríamos sería el siguiente:

<br />
&amp;lt;div class=&amp;quot;example-date&amp;quot;&amp;gt;<br />
&amp;lt;span class=&amp;quot;day&amp;quot;&amp;gt;31&amp;lt;/span&amp;gt;<br />
&amp;lt;span class=&amp;quot;month&amp;quot;&amp;gt;July&amp;lt;/span&amp;gt;<br />
&amp;lt;span class=&amp;quot;year&amp;quot;&amp;gt;2009&amp;lt;/span&amp;gt;<br />
&amp;lt;/div&amp;gt;<br />
.year {
/* WebKit, Safari */
-webkit-transform: rotate(-90deg);
/* Firefox 3.5+*/
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Obteniendo este resultado:

Rotar textos

Leave a Reply